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

MkkHou 發布于2019-08-30 14:10 / 2536人閱讀

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表單上傳文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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