雲控後臺系統 經驗總結（表單和文件上傳等）

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 參考的例子

可編輯區域在指定位置插入html，而且光標位置不改變

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 有三種取值：

1. application/x-www-form-urlencoded 在發送前編碼全部字符（默認）
2. multipart/form-data 不對字符編碼，在使用包含文件上傳控件的表單時，而且不用FormData數據對象必須使用該值
3. 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. 上傳視頻，本地生成縮略圖

1. 用戶點擊 input type=file 觸發 change讀取 input.files，
2. 得到 File 實例建立一個url URL.createObjectURL(file)video 加載 url ，
3. 隨便找一幀，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交互，要把用戶確定要作的操做自動作掉，把不肯定的操做讓用戶本身選擇。