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 = `<img src="https://wx2.qq.com/zh_CN/htmledition/v2/images/spacer.gif" text="${str}" class="qq-emoji qq-emoji${index}"/>`;
return html;
}
return str;
});
2. pre做输入框
2.1 参考的例子
2.2一个奇怪的现象, 如果点击button,则编辑框的焦点位置不会改变,但是除了button的元素焦点就会改变
<button id="btn">点我</button>
<div id="div" style="border: 1px solid gray">点我2</div>
<pre class="pre" style="position:absolute;width:800px;height:240px;background-color: #f5f5f5" 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" id="test" />
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)
}