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

时间：2023-04-02 18:54:20 HTML

1.qq表情替换收到这样一个字符串，通过正则化匹配每组方括号然后替换var_str=i.content.replace(/\[.{1,3}\]/g,(str)=>{//i.content为遍历的消息记录varindex;Object.keys(faceCode).forEach((key,_index)=>{//faceCode是字符串和样式的关系，也可以通过后台约定参数。你不需要像这样搜索if(key===str){index=_index;}});if(index){varhtml=``;returnhtml;}returnstr;});2.预制输入框2.1参考示例可编辑区域在指定位置插入html，光标位置没有变化2.2一个奇怪的现象，如果点击按钮，编辑框的焦点位置不会改变，但是焦点button以外的元素会改变clickmeclickme2

$('#btn').click((e)=>{$('.pre')[0].focus();});$('#div').click((e)=>{$('.pre')[0].focus();})3.表单相关及文件上传3.1．表单的enctypeenctype有三个值：application/x-www-form-urlencodedEncodeallbeforesendingcharacter(default)multipart/form-data不编码字符，当使用包含文件上传控件的表单时，不使用FormData数据对象必须使用这个值text/plain空格被转换为“+”加号，但是不对特殊字符进行编码当然也可以不设置enctype为multipart/form-data，即不通过表单生成数据，而是手动获取数据，将其与FormData组合成一个对象，然后发送。3.2.文件上传的由来最早的HTTPPOST是不支持文件上传的，给编程开发带来了很多问题，但是1995年ietf发布了rfc1867，也就是《RFC 1867 -Form-based File Upload in HTML》，支持文件上传。因此，Content-Type的类型扩展了multipart/form-data以支持向服务器发送二进制数据。3.3文件上传使用files类数组作为大小，文件类型判断varfiles=document.getElementById("test").files;for(variinfiles){if(files[i].type.indexOf('image')===-1){xxxreturn;}if(文件[i].size/(1024*1024)>1){xxxreturn;}}3.4。清空输入框，否则第二次选择同一个文件不会触发更改事件$('#upload')[0].value="";3.5。显示本地上传的图片并使用FileReader对象将它们读取为base64varfileReader=newFileReader();fileReader.onload=(e)=>{document.getElementById('picPreview').src=e.target.result;};varfile=document.getElementById('#upload').files[0];fileReader.readAsDataURL(file);3.6。上传视频，在本地生成缩略图。用户点击inputtype=file触发更改读取输入.files，获取一个File实例创建一个urlURL.createObjectURL(file)video加载url，找到一个随机帧，drawImage()在canvas上绘制并将canvas转换为imgfunctioncreateImg(){varscale=0.15,video=$('#video')[0],canvas=document.创建元素（“画布”），画布填充=canvas.getContext('2d');canvas.width=video.videoWidth*scale;canvas.height=video.videoHeight*scale;canvasFill.drawImage(video,0,0,canvas.width,canvas.height);返回canvas.toDataURL("image/jpeg");}$('#upload')[0].onchange=(e)=>{varwindowURL=window.URL||窗口.webkitURL；varvideoURL=windowURL.createObjectURL(e.target.files[0]);$('#video').attr('src',videoURL);setTimeout(()=>{//一定要加延时，否则读不到图片varimgSrc=createImg();$('#img').attr('src',imgSrc);},500)}4.做一个页面，首先要了解数据结构，用户操作的是什么数据5.做UI交互，需要自动做用户必须做的操作，让用户选择不确定的操作

上一篇：【electron-playground系列】打包优化之路

下一篇：less&&sass

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