云控后臺(tái)系統(tǒng) 經(jīng)驗(yàn)總結(jié)（表單和文件上傳等）

MkkHou 發(fā)布于2019-08-30 14:10 / 2546人閱讀

1. qq emoji替換

接收到這樣的字符串，通過(guò)正則匹配到每組方括號(hào)然后進(jìn)行替換

var _str = i.content.replace(/[.{1,3}]/g, (str) => {    //i.content為遍歷出來(lái)的消息記錄
     var index;
     Object.keys(faceCode).forEach((key, _index) => {    //faceCode為字符串與樣式對(duì)應(yīng)的關(guān)系，也可以通過(guò)參數(shù)去和后臺(tái)約定好，不用這樣查找
         if (key === str) {
             index = _index;
         }
     });
     if (index) {
         var html = ``;
         return html;
     }
    return str;
});

2. pre做輸入框 2.1 參考的例子

可編輯區(qū)域在指定位置插入html，并且光標(biāo)位置不改變

2.2一個(gè)奇怪的現(xiàn)象，如果點(diǎn)擊button，則編輯框的焦點(diǎn)位置不會(huì)改變，但是除了button的元素焦點(diǎn)就會(huì)改變


點(diǎn)我2

$("#btn").click((e) => {
    $(".pre")[0].focus();
});
$("#div").click((e) => {
    $(".pre")[0].focus();
})
3. form表單相關(guān)和文件上傳
3.1. form表單的enctype
enctype 有三種取值：

application/x-www-form-urlencoded   在發(fā)送前編碼所有字符（默認(rèn)）
multipart/form-data     不對(duì)字符編碼，在使用包含文件上傳控件的表單時(shí)，并且不用FormData數(shù)據(jù)對(duì)象必須使用該值
text/plain               空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼

當(dāng)然也可以不用設(shè)置enctype為multipart/form-data，即不通過(guò)表單生成的數(shù)據(jù)，而是手動(dòng)取數(shù)據(jù)，用FormData合并成一個(gè)對(duì)象，進(jìn)行發(fā)送
3.2. 文件上傳的起源
最早的HTTP POST是不支持文件上傳的，給編程開發(fā)帶來(lái)很多問(wèn)題。但是在1995年，ietf出臺(tái)了rfc1867,也就是《RFC 1867 -Form-based File Upload in HTML》，用以支持文件上傳。所以Content-Type的類型擴(kuò)充了multipart/form-data用以支持向服務(wù)器發(fā)送二進(jìn)制數(shù)據(jù)
3.3 文件上傳用files類數(shù)組做大小，文件類型的判斷

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輸入框，否則第二次選擇相同的文件不會(huì)觸發(fā)change事件
$("#upload")[0].value = "";
3.5. 展示本地上傳圖片 用FileReader對(duì)象讀取為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. 上傳視頻，本地生成縮略圖

用戶點(diǎn)擊 input type=file 觸發(fā) change讀取 input.files，
獲得 File 實(shí)例創(chuàng)建一個(gè)url URL.createObjectURL(file)video 加載 url ，
隨便找一幀，drawImage() 畫到 canvas 上把 canvas 轉(zhuǎn)換為 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(() => {   //一定要加延時(shí)，否則圖片讀取不到
        var imgSrc = createImg();
        $("#img").attr("src", imgSrc);
    }, 500)
}
4. 做一個(gè)頁(yè)面，首先要把數(shù)據(jù)結(jié)構(gòu)，用戶操作哪些數(shù)據(jù)想明白
5. 做UI交互，要把用戶肯定要做的操作自動(dòng)做掉，把不確定的操作讓用戶自己選擇。