1. qq emoji替换
接收到这样的字符串，通过正则匹配到每组方括号然后进行替换
</>复制代码
var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content为遍历出来的消息记录 var index; Object.keys(faceCode).forEach((key, _index) => { //faceCode为字符串与样式对应的关系，也可以通过参数去和后台约定好，不用这样查找 if (key === str) { index = _index; } }); if (index) { var html = ``; return html; } return str;});
可编辑区域在指定位置插入html，并且光标位置不改变
2.2一个奇怪的现象， 如果点击button，则编辑框的焦点位置不会改变，但是除了button的元素焦点就会改变</>复制代码
点我2</>复制代码
$("#btn").click((e) => { $(".pre")[0].focus();});$("#div").click((e) => { $(".pre")[0].focus();})
3. form表单相关和文件上传3.1. form表单的enctypeenctype 有三种取值：
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码，在使用包含文件上传控件的表单时，并且不用FormData数据对象必须使用该值
text/plain 空格转换为 "+" 加号，但不对特殊字符编码
当然也可以不用设置enctype为multipart/form-data，即不通过表单生成的数据，而是手动取数据，用FormData合并成一个对象，进行发送
3.2. 文件上传的起源</>复制代码
最早的HTTP POST是不支持文件上传的，给编程开发带来很多问题。但是在1995年，ietf出台了rfc1867,也就是《RFC 1867 -Form-based File Upload in HTML》，用以支持文件上传。所以Content-Type的类型扩充了multipart/form-data用以支持向服务器发送二进制数据
3.3 文件上传用files类数组做大小，文件类型的判断</>复制代码
var files = document.getElementById("test").files;for (var i in files) { if (files[i].type.indexOf("image") === -1) { xxx return; } if (files[i].size/(1024*1024) > 1) { xxx return; }}
3.4. 清空input输入框，否则第二次选择相同的文件不会触发change事件</>复制代码
$("#upload")[0].value = "";
3.5. 展示本地上传图片 用FileReader对象读取为base64</>复制代码
var fileReader = new FileReader();fileReader.onload = (e) => { document.getElementById("picPreview").src = e.target.result;};var file = document.getElementById("#upload").files[0];fileReader.readAsDataURL(file);
3.6. 上传视频，本地生成缩略图用户点击 input type=file 触发 change读取 input.files，
获得 File 实例创建一个url URL.createObjectURL(file)video 加载 url ，
随便找一帧，drawImage() 画到 canvas 上把 canvas 转换为 img
</>复制代码
function createImg() { var scale = 0.15, video = $("#video")[0], canvas = document.createElement("canvas"), canvasFill = canvas.getContext("2d"); canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height); return canvas.toDataURL("image/jpeg");}$("#upload")[0].onchange = (e) => { var windowURL = window.URL || window.webkitURL; var videoURL = windowURL.createObjectURL(e.target.files[0]); $("#video").attr("src", videoURL); setTimeout(() => { //一定要加延时，否则图片读取不到 var imgSrc = createImg(); $("#img").attr("src", imgSrc); }, 500)}
4. 做一个页面，首先要把数据结构，用户操作哪些数据想明白5. 做UI交互，要把用户肯定要做的操作自动做掉，把不确定的操作让用户自己选择。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52031.html
1. qq emoji替换 接收到这样的字符串，通过正则匹配到每组方括号然后进行替换 var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content为遍历出来的消息记录 var index; Object.keys(faceCode).forEach((key, _index) => { //face...
1. qq emoji替换 接收到这样的字符串，通过正则匹配到每组方括号然后进行替换 var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content为遍历出来的消息记录 var index; Object.keys(faceCode).forEach((key, _index) => { //face...
摘要：大学网站使用了名为的开源程序，青年使用一个已经公开的漏洞进入后台青年使用后台上传限制不严的缺陷上传了一个控制主机赠送我国国旗。这些程序都是国内开源程序中的佼佼者，也比较注重安全性。此时后台程序的安全性成为一个短板。 一、前言 不知怎的最近甚是思念校园生活，思念食堂的炒饭。那时会去各种安全bbs上刷刷帖子，喜欢看别人写的一些关于安全技巧或经验的总结；那时BBS上很多文章标题都是：成功渗...
摘要：大学网站使用了名为的开源程序，青年使用一个已经公开的漏洞进入后台青年使用后台上传限制不严的缺陷上传了一个控制主机赠送我国国旗。这些程序都是国内开源程序中的佼佼者，也比较注重安全性。此时后台程序的安全性成为一个短板。 一、前言 不知怎的最近甚是思念校园生活，思念食堂的炒饭。那时会去各种安全bbs上刷刷帖子，喜欢看别人写的一些关于安全技巧或经验的总结；那时BBS上很多文章标题都是：成功渗...
摘要：今天给大家带来了好程序员实战项目商城管理后台。配合项目学习会让你更快掌握它的使用方法下面就来看看好程序员这套实战项目课程介绍好程序员项目本项目是一个使用开发的商城系统的管理后台，里面登录判断，接口调用，数据展示和编辑，文件上传等后台功能。 众所周知，项目经验对于一个程序员变得越来越重要。在面...
阅读 3175·2021-10-14 09:50
阅读 1361·2021-10-08 10:21
阅读 3834·2021-10-08 10:16
阅读 3248·2021-09-27 14:02
阅读 3247·2021-09-23 11:21
阅读 2390·2021-09-07 10:17
阅读 496·2019-08-30 14:00
阅读 2245·2019-08-29 17:26
