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

MkkHou 发布于2019-08-30 14:10 / 2521人阅读

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;
});

2. pre做输入框 2.1 参考的例子

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

2.2一个奇怪的现象，如果点击button，则编辑框的焦点位置不会改变，但是除了button的元素焦点就会改变


点我2

$("#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类数组做大小，文件类型的判断

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交互，要把用户肯定要做的操作自动做掉，把不确定的操作让用户自己选择。

GPU云服务器云服务器经验总结文件上传表单服务器迁移经验总结 from表单上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115828.html

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

1. qq emoji替换接收到这样的字符串，通过正则匹配到每组方括号然后进行替换 var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content为遍历出来的消息记录 var index; Object.keys(faceCode).forEach((key, _index) => { //face...

hatlonely 2019-08-22 15:30 评论0 收藏0
云控后台系统经验总结（表单和文件上传等）

1. qq emoji替换接收到这样的字符串，通过正则匹配到每组方括号然后进行替换 var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content为遍历出来的消息记录 var index; Object.keys(faceCode).forEach((key, _index) => { //face...

YacaToy 2019-08-01 18:42 评论0 收藏0
浅谈开源web程序后台的安全性

摘要：大学网站使用了名为的开源程序，青年使用一个已经公开的漏洞进入后台青年使用后台上传限制不严的缺陷上传了一个控制主机赠送我国国旗。这些程序都是国内开源程序中的佼佼者，也比较注重安全性。此时后台程序的安全性成为一个短板。一、前言不知怎的最近甚是思念校园生活，思念食堂的炒饭。那时会去各种安全bbs上刷刷帖子，喜欢看别人写的一些关于安全技巧或经验的总结；那时BBS上很多文章标题都是：成功渗...

ad6623 2019-06-21 16:23 评论0 收藏0
浅谈开源web程序后台的安全性

摘要：大学网站使用了名为的开源程序，青年使用一个已经公开的漏洞进入后台青年使用后台上传限制不严的缺陷上传了一个控制主机赠送我国国旗。这些程序都是国内开源程序中的佼佼者，也比较注重安全性。此时后台程序的安全性成为一个短板。一、前言不知怎的最近甚是思念校园生活，思念食堂的炒饭。那时会去各种安全bbs上刷刷帖子，喜欢看别人写的一些关于安全技巧或经验的总结；那时BBS上很多文章标题都是：成功渗...

ky0ncheng 2019-06-27 10:36 评论0 收藏0
好程序员React精品项目全集：商城管理后台（视频+源码+笔记）

摘要：今天给大家带来了好程序员实战项目商城管理后台。配合项目学习会让你更快掌握它的使用方法下面就来看看好程序员这套实战项目课程介绍好程序员项目本项目是一个使用开发的商城系统的管理后台，里面登录判断，接口调用，数据展示和编辑，文件上传等后台功能。众所周知，项目经验对于一个程序员变得越来越重要。在面...

李世赞 2021-11-11 16:55 评论0 收藏0