接收到这样的字符串，通过正则匹配到每组方括号然后进行替换

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 = `<img src="http://www.mamicode.com/https:/wx2.qq.com/zh_CN/htmledition/v2/images/spacer.gif" text="${str}"/>`; return html; } return str; }); 2. pre做输入框 2.1 参考的例子

可编辑区域在指定位置插入html，并且光标位置不改变

2.2一个奇怪的现象， 如果点击button，，则编辑框的焦点位置不会改变，但是除了button的元素焦点就会改变 <button>点我</button> <div>点我2</div> <pre contenteditable="true"> $(‘#btn‘).click((e) => { $(‘.pre‘)[0].focus(); }); $(‘#div‘).click((e) => { $(‘.pre‘)[0].focus(); }) 3. form表单相关和文件上传 3.1. form表单的enctype

enctype 有三种取值：

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类数组做大小，文件类型的判断 <input type="file" /> 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交互，要把用户肯定要做的操作自动做掉，把不确定的操作让用户自己选择。

云控后台系统 经验总结（表单和文件上传等）