成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

hatlonely / 2531人閱讀

1. qq emoji替換

接收到這樣的字符串，通過正則匹配到每組方括號然后進行替換

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

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

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


點我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ā)送前編碼所有字符（默認）


multipart/form-data     不對字符編碼，在使用包含文件上傳控件的表單時，并且不用FormData數(shù)據(jù)對象必須使用該值


text/plain               空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼



當(dāng)然也可以不用設(shè)置enctype為multipart/form-data，即不通過表單生成的數(shù)據(jù)，而是手動取數(shù)據(jù)，用FormData合并成一個對象，進行發(fā)送

3.2. 文件上傳的起源

最早的HTTP POST是不支持文件上傳的，給編程開發(fā)帶來很多問題。但是在1995年，ietf出臺了rfc1867,也就是《RFC 1867 -Form-based File Upload in HTML》，用以支持文件上傳。所以Content-Type的類型擴充了multipart/form-data用以支持向服務(wù)器發(fā)送二進制數(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輸入框，否則第二次選擇相同的文件不會觸發(fā)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 觸發(fā) change讀取 input.files，


獲得 File 實例創(chuàng)建一個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(() => {   //一定要加延時，否則圖片讀取不到
        var imgSrc = createImg();
        $("#img").attr("src", imgSrc);
    }, 500)
}

4. 做一個頁面，首先要把數(shù)據(jù)結(jié)構(gòu)，用戶操作哪些數(shù)據(jù)想明白
5. 做UI交互，要把用戶肯定要做的操作自動做掉，把不確定的操作讓用戶自己選擇。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93488.html

相關(guān)文章

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

    1. qq emoji替換 接收到這樣的字符串，通過正則匹配到每組方括號然后進行替換 var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content為遍歷出來的消息記錄 var index; Object.keys(faceCode).forEach((key, _index) => { //face...

    MkkHou 評論0 收藏0

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

    1. qq emoji替換 接收到這樣的字符串，通過正則匹配到每組方括號然后進行替換 var _str = i.content.replace(/[.{1,3}]/g, (str) => { //i.content為遍歷出來的消息記錄 var index; Object.keys(faceCode).forEach((key, _index) => { //face...

    YacaToy 評論0 收藏0

  • 淺談開源web程序后臺的安全性

    摘要：大學(xué)網(wǎng)站使用了名為的開源程序，青年使用一個已經(jīng)公開的漏洞進入后臺青年使用后臺上傳限制不嚴的缺陷上傳了一個控制主機贈送我國國旗。這些程序都是國內(nèi)開源程序中的佼佼者，也比較注重安全性。此時后臺程序的安全性成為一個短板。 一、前言 不知怎的最近甚是思念校園生活，思念食堂的炒飯。那時會去各種安全bbs上刷刷帖子，喜歡看別人寫的一些關(guān)于安全技巧或經(jīng)驗的總結(jié)；那時BBS上很多文章標題都是：成功滲...

    ad6623 評論0 收藏0

  • 淺談開源web程序后臺的安全性

    摘要：大學(xué)網(wǎng)站使用了名為的開源程序，青年使用一個已經(jīng)公開的漏洞進入后臺青年使用后臺上傳限制不嚴的缺陷上傳了一個控制主機贈送我國國旗。這些程序都是國內(nèi)開源程序中的佼佼者，也比較注重安全性。此時后臺程序的安全性成為一個短板。 一、前言 不知怎的最近甚是思念校園生活，思念食堂的炒飯。那時會去各種安全bbs上刷刷帖子，喜歡看別人寫的一些關(guān)于安全技巧或經(jīng)驗的總結(jié)；那時BBS上很多文章標題都是：成功滲...

    ky0ncheng 評論0 收藏0

  • 好程序員React精品項目全集：商城管理后臺（視頻+源碼+筆記）

    摘要：今天給大家?guī)砹撕贸绦騿T實戰(zhàn)項目商城管理后臺。配合項目學(xué)習(xí)會讓你更快掌握它的使用方法下面就來看看好程序員這套實戰(zhàn)項目課程介紹好程序員項目本項目是一個使用開發(fā)的商城系統(tǒng)的管理后臺，里面登錄判斷，接口調(diào)用，數(shù)據(jù)展示和編輯，文件上傳等后臺功能。 眾所周知，項目經(jīng)驗對于一個程序員變得越來越重要。在面...

    李世贊 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<