日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
前端本地文件操作與上傳

前端無(wú)法像原生APP一樣直接操作本地文件，否則的話打開個(gè)網(wǎng)頁(yè)就能把用戶電腦上的文件偷光了，所以需要通過(guò)用戶觸發(fā)，用戶可通過(guò)以下三種方式操作觸發(fā)：

  1. 通過(guò)input type=”file” 選擇本地文件
  2. 通過(guò)拖拽的方式把文件拖過(guò)來(lái)
  3. 在編輯框里面復(fù)制粘貼

***種是最常用的手段，通常還會(huì)自定義一個(gè)按鈕，然后蓋在它上面，因?yàn)閠ype=”file”的input不好改變樣式。如下代碼寫一個(gè)選擇控件，并放在form里面：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.  
    4.

然后就可以用FormData獲取整個(gè)表單的內(nèi)容：

 
 
 
 
      
  
  
  
  1. $("#file-input").on("change", function() { 
    2.   
  
  
  
  2.     console.log(`file name is ${this.value}`); 
    3.   
  
  
  
  3.     let formData = new FormData(this.form); 
    4.   
  
  
  
  4.     formData.append("fileName", this.value); 
    5.   
  
  
  
  5.     console.log(formData); 
    6.   
  
  
  
  6. }); 
    7.

把input的value和formData打印出來(lái)是這樣的：

可以看到文件的路徑是一個(gè)假的路徑，也就是說(shuō)在瀏覽器無(wú)法獲取到文件的真實(shí)存放位置。同時(shí)FormData打印出來(lái)是一個(gè)空的Objet，但并不是說(shuō)它的內(nèi)容是空的，只是它對(duì)前端開發(fā)人員是透明的，無(wú)法查看、修改、刪除里面的內(nèi)容，只能append添加字段。

FormData無(wú)法得到文件的內(nèi)容，而使用FileReader可以讀取整個(gè)文件的內(nèi)容。用戶選擇文件之后，input.files就可以得到用戶選中的文件，如下代碼：

 
 
 
 
      
  
  
  
  1. $("#file-input").on("change", function() { 
    2.   
  
  
  
  2.     let fileReader = new FileReader(), 
    3.   
  
  
  
  3.         fileType = this.files[0].type; 
    4.   
  
  
  
  4.     fileReader.onload = function() { 
    5.   
  
  
  
  5.         if (/^image/.test(fileType)) { 
    6.   
  
  
  
  6.             // 讀取結(jié)果在fileReader.result里面 
    7.   
  
  
  
  7.             $(``).appendTo("body"); 
    8.   
  
  
  
  8.         } 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10.     // 打印原始File對(duì)象 
    11.   
  
  
  
  11.     console.log(this.files[0]); 
    12.   
  
  
  
  12.     // base64方式讀取 
    13.   
  
  
  
  13.     fileReader.readAsDataURL(this.files[0]);     
    14.   
  
  
  
  14. }); 
    15.

把原始的File對(duì)象打印出來(lái)是這樣的：

它是一個(gè)window.File的實(shí)例，包含了文件的修改時(shí)間、文件名、文件的大小、文件的mime類型等。如果需要限制上傳文件的大小就可以通過(guò)判斷size屬性有沒(méi)有超，單位是字節(jié)，而要判斷是否為圖片文件就可以通過(guò)type類型是否以image開頭。通過(guò)判斷文件名的后綴可能會(huì)不準(zhǔn)，而通過(guò)這種判斷會(huì)比較準(zhǔn)。上面的代碼使用了一個(gè)正則判斷，如果是一張圖片的話就把它賦值給img的src，并添加到dom里面，但其實(shí)這段代碼有點(diǎn)問(wèn)題，就是web不是所有的圖片都能通過(guò)img標(biāo)簽展示出來(lái)，通常是jpg/png/gif這三種，所以你應(yīng)該需要再判斷一下圖片格式，如可以把判斷改成：

 
 
 
 
      
  
  
  
  1. /^image\/[jpeg|png|gif]/.test(this.type) 
    2.

然后實(shí)例化一個(gè)FileReader，調(diào)它的readAsDataURL并把File對(duì)象傳給它，監(jiān)聽它的onload事件，load完讀取的結(jié)果就在它的result屬性里了。它是一個(gè)base64格式的，可直接賦值給一個(gè)img的src.

使用FileReader除了可讀取為base64之外，還能讀取為以下格式：

 
 
 
 
      
  
  
  
  1. // 按base64的方式讀取，結(jié)果是base64，任何文件都可轉(zhuǎn)成base64的形式 
    2.   
  
  
  
  2. fileReader.readAsDataURL(this.files[0]); 
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4. // 以二進(jìn)制字符串方式讀取，結(jié)果是二進(jìn)制內(nèi)容的utf-8形式，已被廢棄了 
    5.   
  
  
  
  5. fileReader.readAsBinaryString(this.files[0]); 
    6.   
  
  
  
  6.   
    7.   
  
  
  
  7. // 以原始二進(jìn)制方式讀取，讀取結(jié)果可直接轉(zhuǎn)成整數(shù)數(shù)組 
    8.   
  
  
  
  8. fileReader.readAsArrayBuffer(this.files[0]); 
    9.

其它的主要是能讀取為ArrayBuffer，它是一個(gè)原始二進(jìn)制格式的結(jié)果。把ArrayBuffer打印出來(lái)是這樣的：

可以看到，它對(duì)前端開發(fā)人員也是透明的，不能夠直接讀取里面的內(nèi)容，但可以通過(guò)ArrayBuffer.length得到長(zhǎng)度，還能轉(zhuǎn)成整型數(shù)組，就能知道文件的原始二進(jìn)制內(nèi)容了：

 
 
 
 
      
  
  
  
  1. let buffer = this.result; 
    2.   
  
  
  
  2. // 依次每字節(jié)8位讀取，放到一個(gè)整數(shù)數(shù)組 
    3.   
  
  
  
  3. let view = new Uint8Array(buffer); 
    4.   
  
  
  
  4. console.log(view); 
    5.

如果是通過(guò)第二種拖拽的方式，應(yīng)該怎么讀取文件呢？如下html（樣式略）：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.     drop your image here 
    3.
 

這將在頁(yè)面顯示一個(gè)框：

然后監(jiān)聽它的拖拽事件：

 
 
 
 
      
  
  
  
  1. $(".img-container").on("dragover", function (event) { 
    2.   
  
  
  
  2.     event.preventDefault(); 
    3.   
  
  
  
  3. }) 
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5. .on("drop", function(event) { 
    6.   
  
  
  
  6.     event.preventDefault(); 
    7.   
  
  
  
  7.     // 數(shù)據(jù)在event的dataTransfer對(duì)象里 
    8.   
  
  
  
  8.     let file = event.originalEvent.dataTransfer.files[0]; 
    9.   
  
  
  
  9.   
    10.   
  
  
  
  10.     // 然后就可以使用FileReader進(jìn)行操作 
    11.   
  
  
  
  11.     fileReader.readAsDataURL(file); 
    12.   
  
  
  
  12.   
    13.   
  
  
  
  13.     // 或者是添加到一個(gè)FormData 
    14.   
  
  
  
  14.     let formData = new FormData(); 
    15.   
  
  
  
  15.     formData.append("fileContent", file); 
    16.   
  
  
  
  16. }) 
    17.

數(shù)據(jù)在drop事件的event.dataTransfer.files里面，拿到這個(gè)File對(duì)象之后就可以和輸入框進(jìn)行一樣的操作了，即使用FileReader讀取，或者是新建一個(gè)空的formData，然后把它append到formData里面。

第三種粘貼的方式，通常是在一個(gè)編輯框里操作，如把div的contenteditable設(shè)置為true：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      hello, paste your image here 
    3.
 

粘貼的數(shù)據(jù)是在event.clipboardData.files里面：

 
 
 
 
      
  
  
  
  1. $("#editor").on("paste", function(event) { 
    2.   
  
  
  
  2.     let file = event.originalEvent.clipboardData.files[0]; 
    3.   
  
  
  
  3. }); 
    4.

但是Safari的粘貼不是通過(guò)event傳遞的，它是直接在輸入框里面添加一張圖片，如下圖所示：

它新建了一個(gè)img標(biāo)簽，并把img的src指向一個(gè)blob的本地?cái)?shù)據(jù)。什么是blob呢，如何讀取blob的內(nèi)容呢？

blob是一種類文件的存儲(chǔ)格式，它可以存儲(chǔ)幾乎任何格式的內(nèi)容，如json：

 
 
 
 
      
  
  
  
  1. let data = {hello: "world"}; 
    2.   
  
  
  
  2. let blob = new Blob([JSON.stringify(data)], 
    3.   
  
  
  
  3.   {type : 'application/json'}); 
    4.

為了獲取本地的blob數(shù)據(jù)，我們可以用ajax發(fā)個(gè)本地的請(qǐng)求：

 
 
 
 
      
  
  
  
  1. $("#editor").on("paste", function(event) { 
    2.   
  
  
  
  2.     // 需要setTimeout 0等圖片出來(lái)了再處理 
    3.   
  
  
  
  3.     setTimeout(() => { 
    4.   
  
  
  
  4.         let img = $(this).find("img[src^='blob']")[0]; 
    5.   
  
  
  
  5.         console.log(img.src); 
    6.   
  
  
  
  6.         // 用一個(gè)xhr獲取blob數(shù)據(jù) 
    7.   
  
  
  
  7.         let xhr = new XMLHttpRequest(); 
    8.   
  
  
  
  8.         xhr.open("GET", img.src); 
    9.   
  
  
  
  9.         // 改變mime類型 
    10.   
  
  
  
  10.         xhr.responseType = "blob"; 
    11.   
  
  
  
  11.         xhr.onload = function () { 
    12.   
  
  
  
  12.             // response就是一個(gè)Blob對(duì)象 
    13.   
  
  
  
  13.             console.log(this.response); 
    14.   
  
  
  
  14.         }; 
    15.   
  
  
  
  15.         xhr.send(); 
    16.   
  
  
  
  16.     }, 0); 
    17.   
  
  
  
  17. }); 
    18.

上面代碼把blob打印出來(lái)是這樣的：

能得到它的大小和類型，但是具體內(nèi)容也是不可見的，它有一個(gè)slice的方法，可用于切割大文件。和File一樣，可以使用FileReader讀取它的內(nèi)容：

 
 
 
 
      
  
  
  
  1. function readBlob(blobImg) { 
    2.   
  
  
  
  2.     let fileReader = new FileReader(); 
    3.   
  
  
  
  3.     fileReader.onload = function() { 
    4.   
  
  
  
  4.         console.log(this.result); 
    5.   
  
  
  
  5.     } 
    6.   
  
  
  
  6.     fileReader.onerror = function(err) { 
    7.   
  
  
  
  7.         console.log(err); 
    8.   
  
  
  
  8.     } 
    9.   
  
  
  
  9.     fileReader.readAsDataURL(blobImg); 
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11.   
    12.   
  
  
  
  12. readBlob(this.response); 
    13.

除此，還能使用window.URL讀取，這是一個(gè)新的API，經(jīng)常和Service Worker配套使用，因?yàn)镾W里面常常要解析url。如下代碼：

 
 
 
 
      
  
  
  
  1. function readBlob(blobImg) { 
    2.   
  
  
  
  2.     let urlCreator = window.URL || window.webkitURL; 
    3.   
  
  
  
  3.     // 得到base64結(jié)果 
    4.   
  
  
  
  4.     let imageUrl = urlCreator.createObjectURL(this.response); 
    5.   
  
  
  
  5.     return imageUrl; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.   
    8.   
  
  
  
  8. readBlob(this.response); 
    9.

關(guān)于src使用的是blob鏈接的，除了上面提到的img之外，另外一個(gè)很常見的是video標(biāo)簽，如youtobe的視頻就是使用的blob：

這種數(shù)據(jù)不是直接在本地的，而是通過(guò)持續(xù)請(qǐng)求視頻數(shù)據(jù)，然后再通過(guò)blob這個(gè)容器媒介添加到video里面，它也是通過(guò)URL的API創(chuàng)建的：

 
 
 
 
      
  
  
  
  1. let mediaSource = new MediaSource(); 
    2.   
  
  
  
  2. video.src = URL.createObjectURL(mediaSource); 
    3.   
  
  
  
  3. let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
    4.   
  
  
  
  4. sourceBuffer.appendBuffer(buf); 
    5.

具體我也沒(méi)實(shí)踐過(guò)，不再展開討論。

上面，我們使用了三種方式獲取文件內(nèi)容，***得到：

  1. FormData格式
  2. FileReader讀取得到的base64或者ArrayBuffer二進(jìn)制格式

如果直接就是一個(gè)FormData了，那么直接用ajax發(fā)出去就行了，不用做任何處理：

 
 
 
 
      
  
  
  
  1. let form = document.querySelector("form"), 
    2.   
  
  
  
  2.     formData = new FormData(form), 
    3.   
  
  
  
  3. formData.append("fileName", "photo.png"); 
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5. let xhr = new XMLHttpRequest(); 
    6.   
  
  
  
  6. // 假設(shè)上傳文件的接口叫upload 
    7.   
  
  
  
  7. xhr.open("POST", "/upload"); 
    8.   
  
  
  
  8. xhr.send(formData); 
    9.

如果用jQuery的話，要設(shè)置兩個(gè)屬性為false：

 
 
 
 
      
  
  
  
  1. $.ajax({ 
    2.   
  
  
  
  2.     url: "/upload", 
    3.   
  
  
  
  3.     type: "POST", 
    4.   
  
  
  
  4.     data: formData, 
    5.   
  
  
  
  5.     processData: false,  // 不處理數(shù)據(jù) 
    6.   
  
  
  
  6.     contentType: false   // 不設(shè)置內(nèi)容類型 
    7.   
  
  
  
  7. }); 
    8.

因?yàn)閖Query會(huì)自動(dòng)把內(nèi)容做一些轉(zhuǎn)義，并且根據(jù)data自動(dòng)設(shè)置請(qǐng)求mime類型，這里告訴jQuery直接用xhr.send發(fā)出去就行了。

觀察控制臺(tái)發(fā)請(qǐng)求的數(shù)據(jù)：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.  
    4.

如果xhr.send的是FormData類型話，它會(huì)自動(dòng)設(shè)置enctype，如果你用默認(rèn)表單提交上傳文件的話就得在form上面設(shè)置這個(gè)屬性，因?yàn)樯蟼魑募荒苁褂肞OST的這種編碼。常用的POST編碼是application/x-www-form-urlencoded，它和GET一樣，發(fā)送的數(shù)據(jù)里面，參數(shù)和參數(shù)之間使用&連接，如：

 
 
 
 
      
  
  
  
  1. key1=value1&key2=value2 
    2.

特殊字符做轉(zhuǎn)義，這個(gè)數(shù)據(jù)POST是放在請(qǐng)求body里的，而GET是拼在url上面的，如果用jq的話，jq會(huì)幫你拼并做轉(zhuǎn)義。

而上傳文件用的這種multipart/form-data，參數(shù)和參數(shù)之間是且一個(gè)相同的字符串隔開的，上面的是使用：

 
 
 
 
      
  
  
  
  1. ——WebKitFormBoundary72yvM25iSPYZ4a3F 
    2.

這個(gè)字符通常會(huì)取得比較長(zhǎng)、比較隨機(jī)，因?yàn)橐ＷC正常的內(nèi)容里面不會(huì)出現(xiàn)這個(gè)字符串，這樣內(nèi)容的特殊字符就不用做轉(zhuǎn)義了。

請(qǐng)求的contentType被瀏覽器設(shè)置成：

 
 
 
 
      
  
  
  
  1. Content-Type:  
    2.   
  
  
  
  2. multipart/form-data; boundary=—-WebKitFormBoundary72yvM25iSPYZ4a3F 
    3.

后端服務(wù)通過(guò)這個(gè)就知道怎么解析這么一段數(shù)據(jù)了。（通常是使用的框架處理了，而具體的接口不需要關(guān)心應(yīng)該怎么解析）

如果讀取結(jié)果是ArrayBuffer的話，也是可以直接用xhr.send發(fā)送出去的，但是一般我們不會(huì)直接把一個(gè)文件的內(nèi)容發(fā)出去，而是用某個(gè)字段名等于文件內(nèi)容的方式。如果你讀取為ArrayBuffer的話再上傳的話其實(shí)作用不是很大，還不如直接用formData添加一個(gè)File對(duì)象的內(nèi)容，因?yàn)樯厦嫒N方式都可以拿到File對(duì)象。如果一開始就是一個(gè)ArrayBuffer了，那么可以轉(zhuǎn)成blob然后再append到FormData里面。

使用比較多的應(yīng)該是base64，因?yàn)榍岸私?jīng)常要處理圖片，讀取為base64之后就可以把它畫到一個(gè)canvas里面，然后就可以做一些處理，如壓縮、裁剪、旋轉(zhuǎn)等。***再用canvas導(dǎo)出一個(gè)base64格式的圖片，那怎么上傳base64格式的呢？

***種是拼一個(gè)表單上傳的multipart/form-data的格式，再用xhr.sendAsBinary發(fā)出去，如下代碼：

 
 
 
 
      
  
  
  
  1. let base64Data = base64Data.replace(/^data:image\/[^;]+;base64,/, ""); 
    2.   
  
  
  
  2. let boundary = "----------boundaryasoifvlkasldvavoadv"; 
    3.   
  
  
  
  3. xhr.sendAsBinary([ 
    4.   
  
  
  
  4.     // name=data 
    5.   
  
  
  
  5.     boundary, 
    6.   
  
  
  
  6.         'Content-Disposition: form-data; name="data"; filename="' + fileName + '"', 
    7.   
  
  
  
  7.         'Content-Type: ' + "image/" + fileType, '', 
    8.   
  
  
  
  8.         atob(base64Data), boundary, 
    9.   
  
  
  
  9.     //name=imageType 
    10.   
  
  
  
  10.     boundary, 
    11.   
  
  
  
  11.         'Content-Disposition: form-data; name="imageType"', '', 
    12.   
  
  
  
  12.         fileType, 
    13.   
  
  
  
  13.     boundary + '--' 
    14.   
  
  
  
  14. ].join('\r\n')); 
    15.

上面代碼使用了window.atob的api，它可以把base64還原成原始內(nèi)容的字符串表示，如下圖所示：

btoa是把內(nèi)容轉(zhuǎn)化成base64編碼，而atob是把base64還原。在調(diào)atob之前，需要把表示內(nèi)容格式的不屬于base64內(nèi)容的字符串去掉，即上面代碼***行的replace處理。

這樣就和使用formData類似了，但是由于sendAsBinary已經(jīng)被deprecated了，所以新代碼不建議再使用這種方式。那怎么辦呢？

可以把base64轉(zhuǎn)化成blob，然后再append到一個(gè)formData里面，下面的函數(shù)（來(lái)自b64-to-blob）可以把base64轉(zhuǎn)成blob：

 
 
 
 
      
  
  
  
  1. function b64toBlob(b64Data, contentType, sliceSize) { 
    2.   
  
  
  
  2.     contentType = contentType || ''; 
    3.   
  
  
  
  3.     sliceSize = sliceSize || 512; 
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.     var byteCharacters = atob(b64Data); 
    6.   
  
  
  
  6.     var byteArrays = []; 
    7.   
  
  
  
  7.   
    8.   
  
  
  
  8.     for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
    9.   
  
  
  
  9.       var slice = byteCharacters.slice(offset, offset + sliceSize); 
    10.   
  
  
  
  10.   
    11.   
  
  
  
  11.       var byteNumbers = new Array(slice.length); 
    12.   
  
  
  
  12.       for (var i = 0; i < slice.length; i++) { 
    13.   
  
  
  
  13.         byteNumbers[i] = slice.charCodeAt(i); 
    14.   
  
  
  
  14.       } 
    15.   
  
  
  
  15.   
    16.   
  
  
  
  16.       var byteArray = new Uint8Array(byteNumbers); 
    17.   
  
  
  
  17.   
    18.   
  
  
  
  18.       byteArrays.push(byteArray); 
    19.   
  
  
  
  19.     } 
    20.   
  
  
  
  20.   
    21.   
  
  
  
  21.     var blob = new Blob(byteArrays, {type: contentType}); 
    22.   
  
  
  
  22.     return blob; 
    23.   
  
  
  
  23. } 
    24.

然后就可以append到formData里面：

 
 
 
 
      
  
  
  
  1. let blob = b64toBlob(b64Data, "image/png"), 
    2.   
  
  
  
  2.     formData = new FormData(); 
    3.   
  
  
  
  3. formData.append("fileContent", blob); 
    4.

這樣就不用自己去拼一個(gè)multipart/form-data的格式數(shù)據(jù)了。

上面處理和上傳文件的API可以兼容到IE10+，如果要兼容老的瀏覽器應(yīng)該怎么辦呢？

可以借助一個(gè)iframe，原理是默認(rèn)的form表單提交會(huì)刷新頁(yè)面，或者跳到target指定的那個(gè)url，但是如果把ifrmae的target指向一個(gè)iframe，那么刷新的就是iframe，返回結(jié)果也會(huì)顯示在ifame，然后獲取這個(gè)ifrmae的內(nèi)容就可得到上傳接口返回的結(jié)果。

如下代碼：

 
 
 
 
      
  
  
  
  1. let iframe = document.createElement("iframe"); 
    2.   
  
  
  
  2. iframe.display = "none"; 
    3.   
  
  
  
  3. iframe.name = "form-iframe"; 
    4.   
  
  
  
  4. document.body.appendChild(iframe); 
    5.   
  
  
  
  5. // 改變form的target 
    6.   
  
  
  
  6. form.target = "form-iframe"; 
    7.   
  
  
  
  7.   
    8.   
  
  
  
  8. iframe.onload = function() { 
    9.   
  
  
  
  9.     //獲取iframe的內(nèi)容，即服務(wù)返回的數(shù)據(jù) 
    10.   
  
  
  
  10.     let responseText = this.contentDocument.body.textContent  
    11.   
  
  
  
  11.             || this.contentWindow.document.body.textContent; 
    12.   
  
  
  
  12. }; 
    13.   
  
  
  
  13.   
    14.   
  
  
  
  14. form.submit(); 
    15.

form.submit會(huì)觸發(fā)表單提交，當(dāng)請(qǐng)求完成（成功或者失敗）之后就會(huì)觸發(fā)iframe的onload事件，然后在onload事件獲取返回的數(shù)據(jù)，如果請(qǐng)求失敗了的話，iframe里的內(nèi)容就為空，可以用這個(gè)判斷請(qǐng)求有沒(méi)有成功。

使用iframe沒(méi)有辦法獲取上傳進(jìn)度，使用xhr可以獲取當(dāng)前上傳的進(jìn)度，這個(gè)是在XMLHttpRequest 2.0引入的：

 
 
 
 
      
  
  
  
  1. xhr.upload.onprogress = function (event) { 
    2.   
  
  
  
  2.     if (event.lengthComputable) { 
    3.   
  
  
  
  3.         // 當(dāng)前上傳進(jìn)度的百分比 
    4.   
  
  
  
  4.         duringCallback ((event.loaded / event.total)*100); 
    5.   
  
  
  
  5.     } 
    6.   
  
  
  
  6. }; 
    7.

這樣就可以做一個(gè)真實(shí)的loading進(jìn)度條。

本文討論了3種交互方式的讀取方式，通過(guò)input控件在input.files可以得到File文件對(duì)象，通過(guò)拖拽的是在drop事件的event.dataTransfer.files里面，而通過(guò)粘貼的paste事件在event.clipboardData.files里面，Safari這個(gè)怪胎是在編輯器里面插入一個(gè)src指向本地的img標(biāo)簽，可以通過(guò)發(fā)送一個(gè)請(qǐng)求加載本地的blob數(shù)據(jù)，然后再通過(guò)FileReader讀取，或者直接append到formData里面。得到的File對(duì)象就可以直接添加到FormData里面，如果需要先讀取base64格式做處理的，那么可以把處理后的base64轉(zhuǎn)化為blob數(shù)據(jù)再append到formData里面。對(duì)于老瀏覽器，可以使用一個(gè)iframe解決表單提交刷新頁(yè)面或者跳頁(yè)的問(wèn)題。

總之，前端處理和上傳本地文件應(yīng)該差不多就是這些內(nèi)容了，但是應(yīng)該還有好多細(xì)節(jié)沒(méi)有提及到，讀者可通過(guò)本文列的方向自行實(shí)踐。如果有其它的上傳方式還請(qǐng)告知。

 【本文是專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)聯(lián)系原作者獲取授權(quán)】

戳這里，看該作者更多好文


網(wǎng)站名稱：前端本地文件操作與上傳
文章URL：http://m.5511xx.com/article/dhjsipd.html