[[211883]]

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

1. 通過input type=”file” 選擇本地文件
2. 通過拖拽的方式把文件拖過來
3. 在編輯框里面復制粘貼

***種是最常用的手段，通常還會自定義一個按鈕，然后蓋在它上面，因為type=”file”的input不好改變樣式。如下代碼寫一個選擇控件，并放在form里面：

<form> 
    <input type="file" id="file-input" name="fileContent"> 
</form> 

然后就可以用FormData獲取整個表單的內容：

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

把input的value和formData打印出來是這樣的：

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

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

$("#file-input").on("change", function() { 
    let fileReader = new FileReader(), 
        fileType = this.files[0].type; 
    fileReader.onload = function() { 
        if (/^image/.test(fileType)) { 
            // 讀取結果在fileReader.result里面 
            $(`<img src="${this.result}">`).appendTo("body"); 
        } 
    } 
    // 打印原始File對象 
    console.log(this.files[0]); 
    // base64方式讀取 
    fileReader.readAsDataURL(this.files[0]);     
}); 

把原始的File對象打印出來是這樣的：

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

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

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

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

// 按base64的方式讀取，結果是base64，任何文件都可轉成base64的形式 
fileReader.readAsDataURL(this.files[0]); 
  
// 以二進制字符串方式讀取，結果是二進制內容的utf-8形式，已被廢棄了 
fileReader.readAsBinaryString(this.files[0]); 
  
// 以原始二進制方式讀取，讀取結果可直接轉成整數數組 
fileReader.readAsArrayBuffer(this.files[0]); 

其它的主要是能讀取為ArrayBuffer，它是一個原始二進制格式的結果。把ArrayBuffer打印出來是這樣的：

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

let buffer = this.result; 
// 依次每字節(jié)8位讀取，放到一個整數數組 
let view = new Uint8Array(buffer); 
console.log(view); 

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

<div class="img-container"> 
    drop your image here 
</div> 

這將在頁面顯示一個框：

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

$(".img-container").on("dragover", function (event) { 
    event.preventDefault(); 
}) 
  
.on("drop", function(event) { 
    event.preventDefault(); 
    // 數據在event的dataTransfer對象里 
    let file = event.originalEvent.dataTransfer.files[0]; 
  
    // 然后就可以使用FileReader進行操作 
    fileReader.readAsDataURL(file); 
  
    // 或者是添加到一個FormData 
    let formData = new FormData(); 
    formData.append("fileContent", file); 
}) 

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

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

<div contenteditable="true"> 
     hello, paste your image here 
</div> 

粘貼的數據是在event.clipboardData.files里面：

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

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

它新建了一個img標簽，并把img的src指向一個blob的本地數據。什么是blob呢，如何讀取blob的內容呢？

blob是一種類文件的存儲格式，它可以存儲幾乎任何格式的內容，如json：

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

為了獲取本地的blob數據，我們可以用ajax發(fā)個本地的請求：

$("#editor").on("paste", function(event) { 
    // 需要setTimeout 0等圖片出來了再處理 
    setTimeout(() => { 
        let img = $(this).find("img[src^='blob']")[0]; 
        console.log(img.src); 
        // 用一個xhr獲取blob數據 
        let xhr = new XMLHttpRequest(); 
        xhr.open("GET", img.src); 
        // 改變mime類型 
        xhr.responseType = "blob"; 
        xhr.onload = function () { 
            // response就是一個Blob對象 
            console.log(this.response); 
        }; 
        xhr.send(); 
    }, 0); 
}); 

上面代碼把blob打印出來是這樣的：

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

function readBlob(blobImg) { 
    let fileReader = new FileReader(); 
    fileReader.onload = function() { 
        console.log(this.result); 
    } 
    fileReader.onerror = function(err) { 
        console.log(err); 
    } 
    fileReader.readAsDataURL(blobImg); 
} 
  
readBlob(this.response); 

除此，還能使用window.URL讀取，這是一個新的API，經常和Service Worker配套使用，因為SW里面常常要解析url。如下代碼：

function readBlob(blobImg) { 
    let urlCreator = window.URL || window.webkitURL; 
    // 得到base64結果 
    let imageUrl = urlCreator.createObjectURL(this.response); 
    return imageUrl; 
} 
  
readBlob(this.response); 

關于src使用的是blob鏈接的，除了上面提到的img之外，另外一個很常見的是video標簽，如youtobe的視頻就是使用的blob：

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

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

具體我也沒實踐過，不再展開討論。

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

1. FormData格式
2. FileReader讀取得到的base64或者ArrayBuffer二進制格式

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

let form = document.querySelector("form"), 
    formData = new FormData(form), 
formData.append("fileName", "photo.png"); 
  
let xhr = new XMLHttpRequest(); 
// 假設上傳文件的接口叫upload 
xhr.open("POST", "/upload"); 
xhr.send(formData); 

如果用jQuery的話，要設置兩個屬性為false：

$.ajax({ 
    url: "/upload", 
    type: "POST", 
    data: formData, 
    processData: false,  // 不處理數據 
    contentType: false   // 不設置內容類型 
}); 

因為jQuery會自動把內容做一些轉義，并且根據data自動設置請求mime類型，這里告訴jQuery直接用xhr.send發(fā)出去就行了。

觀察控制臺發(fā)請求的數據：

<form enctype="multipart/form-data" method="post"> 
    <input type="file" name="fileContent"> 
</form> 

如果xhr.send的是FormData類型話，它會自動設置enctype，如果你用默認表單提交上傳文件的話就得在form上面設置這個屬性，因為上傳文件只能使用POST的這種編碼。常用的POST編碼是application/x-www-form-urlencoded，它和GET一樣，發(fā)送的數據里面，參數和參數之間使用&連接，如：

key1=value1&key2=value2 

特殊字符做轉義，這個數據POST是放在請求body里的，而GET是拼在url上面的，如果用jq的話，jq會幫你拼并做轉義。

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

——WebKitFormBoundary72yvM25iSPYZ4a3F 

這個字符通常會取得比較長、比較隨機，因為要保證正常的內容里面不會出現這個字符串，這樣內容的特殊字符就不用做轉義了。

請求的contentType被瀏覽器設置成：

Content-Type:  
multipart/form-data; boundary=—-WebKitFormBoundary72yvM25iSPYZ4a3F 

后端服務通過這個就知道怎么解析這么一段數據了。（通常是使用的框架處理了，而具體的接口不需要關心應該怎么解析）

如果讀取結果是ArrayBuffer的話，也是可以直接用xhr.send發(fā)送出去的，但是一般我們不會直接把一個文件的內容發(fā)出去，而是用某個字段名等于文件內容的方式。如果你讀取為ArrayBuffer的話再上傳的話其實作用不是很大，還不如直接用formData添加一個File對象的內容，因為上面三種方式都可以拿到File對象。如果一開始就是一個ArrayBuffer了，那么可以轉成blob然后再append到FormData里面。

使用比較多的應該是base64，因為前端經常要處理圖片，讀取為base64之后就可以把它畫到一個canvas里面，然后就可以做一些處理，如壓縮、裁剪、旋轉等。***再用canvas導出一個base64格式的圖片，那怎么上傳base64格式的呢？

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

let base64Data = base64Data.replace(/^data:image\/[^;]+;base64,/, ""); 
let boundary = "----------boundaryasoifvlkasldvavoadv"; 
xhr.sendAsBinary([ 
    // name=data 
    boundary, 
        'Content-Disposition: form-data; name="data"; filename="' + fileName + '"', 
        'Content-Type: ' + "image/" + fileType, '', 
        atob(base64Data), boundary, 
    //name=imageType 
    boundary, 
        'Content-Disposition: form-data; name="imageType"', '', 
        fileType, 
    boundary + '--' 
].join('\r\n')); 

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

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

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

可以把base64轉化成blob，然后再append到一個formData里面，下面的函數（來自b64-to-blob）可以把base64轉成blob：

function b64toBlob(b64Data, contentType, sliceSize) { 
    contentType = contentType || ''; 
    sliceSize = sliceSize || 512; 
  
    var byteCharacters = atob(b64Data); 
    var byteArrays = []; 
  
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
      var slice = byteCharacters.slice(offset, offset + sliceSize); 
  
      var byteNumbers = new Array(slice.length); 
      for (var i = 0; i < slice.length; i++) { 
        byteNumbers[i] = slice.charCodeAt(i); 
      } 
  
      var byteArray = new Uint8Array(byteNumbers); 
  
      byteArrays.push(byteArray); 
    } 
  
    var blob = new Blob(byteArrays, {type: contentType}); 
    return blob; 
} 

然后就可以append到formData里面：

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

這樣就不用自己去拼一個multipart/form-data的格式數據了。

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

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

如下代碼：

let iframe = document.createElement("iframe"); 
iframe.display = "none"; 
iframe.name = "form-iframe"; 
document.body.appendChild(iframe); 
// 改變form的target 
form.target = "form-iframe"; 
  
iframe.onload = function() { 
    //獲取iframe的內容，即服務返回的數據 
    let responseText = this.contentDocument.body.textContent  
            || this.contentWindow.document.body.textContent; 
}; 
  
form.submit(); 

form.submit會觸發(fā)表單提交，當請求完成（成功或者失?。┲缶蜁|發(fā)iframe的onload事件，然后在onload事件獲取返回的數據，如果請求失敗了的話，iframe里的內容就為空，可以用這個判斷請求有沒有成功。

使用iframe沒有辦法獲取上傳進度，使用xhr可以獲取當前上傳的進度，這個是在XMLHttpRequest 2.0引入的：

xhr.upload.onprogress = function (event) { 
    if (event.lengthComputable) { 
        // 當前上傳進度的百分比 
        duringCallback ((event.loaded / event.total)*100); 
    } 
}; 

這樣就可以做一個真實的loading進度條。

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

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

 【本文是51CTO專欄作者“人人網FED”的原創(chuàng)稿件，轉載請通過51CTO聯系原作者獲取授權】

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