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

通過(guò)input type=“file” 選擇本地文件通過(guò)拖拽的方式把文件拖過(guò)來(lái)在編輯框里面復制粘貼第一種是最常用的手段，通常還會(huì )自定義一個(gè)按鈕，然后蓋在它上面，因為type=“file”的input不好改變樣式。如下代碼寫(xiě)一個(gè)選擇控件，并放在form里面：

<form>

<input type=“file” id=“file-input” name=“fileContent”>

</form>

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

$（“#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打印出來(lái)是這樣的：

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

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

$（“#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對象打印出來(lái)是這樣的：

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

/^image\/[jpeg|png|gif]/.test（this.type）然后實(shí)例化一個(gè)FileReader，調它的readAsDataURL并把File對象傳給它，監聽(tīng)它的onload事件，load完讀取的結果就在它的result屬性里了。它是一個(gè)base64格式的，可直接賦值給一個(gè)img的src.

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

// 按base64的方式讀取，結果是base64，任何文件都可轉成base64的形式fileReader.readAsDataURL（this.files[0]）；// 以二進(jìn)制字符串方式讀取，結果是二進(jìn)制內容的utf-8形式，已被廢棄了fileReader.readAsBinaryString（this.files[0]）；// 以原始二進(jìn)制方式讀取，讀取結果可直接轉成整數數組fileReader.readAsArrayBuffer（this.files[0]）；其它的主要是能讀取為ArrayBuffer，它是一個(gè)原始二進(jìn)制格式的結果。把ArrayBuffer打印出來(lái)是這樣的：

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

let buffer = this.result;// 依次每字節8位讀取，放到一個(gè)整數數組let view = new Uint8Array（buffer）；console.log（view）；如果是通過(guò)第二種拖拽的方式，應該怎么讀取文件呢？如下html（樣式略）：

<div class=“img-container”>

drop your image here</div>

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

然后監聽(tīng)它的拖拽事件：

$（“.img-container”）。on（“dragover”, function （event） {event.preventDefault（）；}）.on（“drop”, function（event） {event.preventDefault（）；// 數據在event的dataTransfer對象里let file = event.originalEvent.dataTransfer.files[0];// 然后就可以使用FileReader進(jìn)行操作fileReader.readAsDataURL（file）；// 或者是添加到一個(gè)FormDatalet formData = new FormData（）；formData.append（“fileContent”, file）；}）數據在drop事件的event.dataTransfer.files里面，拿到這個(gè)File對象之后就可以和輸入框進(jìn)行一樣的操作了，即使用FileReader讀取，或者是新建一個(gè)空的formData，然后把它append到formData里面。

第三種粘貼的方式，通常是在一個(gè)編輯框里操作，如把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的粘貼不是通過(guò)event傳遞的，它是直接在輸入框里面添加一張圖片，如下圖所示：

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

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

let data = {hello: “world”};let blob = new Blob（[JSON.stringify（data）],{type : 'application/json'}）；為了獲取本地的blob數據，我們可以用ajax發(fā)個(gè)本地的請求：

$（“#editor”）。on（“paste”, function（event） {// 需要setTimeout 0等圖片出來(lái)了再處理setTimeout（（） => {let img = $（this）。find（“img[src^='blob']”）[0];console.log（img.src）；// 用一個(gè)xhr獲取blob數據let xhr = new XMLHttpRequest（）；xhr.open（“GET”, img.src）；// 改變mime類(lèi)型xhr.responseType = “blob”;xhr.onload = function （） {// response就是一個(gè)Blob對象console.log（this.response）；};xhr.send（）；}, 0）；}）；上面代碼把blob打印出來(lái)是這樣的：

能得到它的大小和類(lèi)型，但是具體內容也是不可見(jiàn)的，它有一個(gè)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讀取，這是一個(gè)新的API，經(jīng)常和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）；關(guān)于src使用的是blob鏈接的，除了上面提到的img之外，另外一個(gè)很常見(jiàn)的是video標簽，如youtobe的視頻就是使用的blob：

這種數據不是直接在本地的，而是通過(guò)持續請求視頻數據，然后再通過(guò)blob這個(gè)容器媒介添加到video里面，它也是通過(guò)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）；具體我也沒(méi)實(shí)踐過(guò)，不再展開(kāi)討論。

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

FormData格式FileReader讀取得到的base64或者ArrayBuffer二進(jìn)制格式如果直接就是一個(gè)FormData了，那么直接用ajax發(fā)出去就行了，不用做任何處理：

let form = document.querySelector（“form”），formData = new FormData（form），formData.append（“fileName”, “photo.png”）；let xhr = new XMLHttpRequest（）；// 假設上傳文件的接口叫uploadxhr.open（“POST”, “/upload”）；xhr.send（formData）；如果用jQuery的話(huà)，要設置兩個(gè)屬性為false：

$.ajax（{url: “/upload”,type: “POST”,data: formData,processData: false, // 不處理數據contentType: false // 不設置內容類(lèi)型}）；因為jQuery會(huì )自動(dòng)把內容做一些轉義，并且根據data自動(dòng)設置請求mime類(lèi)型，這里告訴jQuery直接用xhr.send發(fā)出去就行了。

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

QQ截圖20171204092315<form enctype=“multipart/form-data” method=“post”>

<input type=“file” name=“fileContent”>

</form>

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

key1=value1&key2=value2特殊字符做轉義，這個(gè)數據POST是放在請求body里的，而GET是拼在url上面的，如果用jq的話(huà)，jq會(huì )幫你拼并做轉義。

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

——WebKitFormBoundary72yvM25iSPYZ4a3F這個(gè)字符通常會(huì )取得比較長(cháng)、比較隨機，因為要保證正常的內容里面不會(huì )出現這個(gè)字符串，這樣內容的特殊字符就不用做轉義了。

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

Content-Type:

multipart/form-data; boundary=—-WebKitFormBoundary72yvM25iSPYZ4a3F后端服務(wù)通過(guò)這個(gè)就知道怎么解析這么一段數據了。（通常是使用的框架處理了，而具體的接口不需要關(guān)心應該怎么解析）如果讀取結果是ArrayBuffer的話(huà)，也是可以直接用xhr.send發(fā)送出去的，但是一般我們不會(huì )直接把一個(gè)文件的內容發(fā)出去，而是用某個(gè)字段名等于文件內容的方式。如果你讀取為ArrayBuffer的話(huà)再上傳的話(huà)其實(shí)作用不是很大，還不如直接用formData添加一個(gè)File對象的內容，因為上面三種方式都可以拿到File對象。如果一開(kāi)始就是一個(gè)ArrayBuffer了，那么可以轉成blob然后再append到FormData里面。

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

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

let base64Data = base64Data.replace（/^data:image\/[^;]+;base64,/, “”）；let boundary = “----------boundaryasoifvlkasldvavoadv”;xhr.sendAsBinary（[// name=databoundary,'Content-Disposition: form-data; name=“data”; filename=“‘ + fileName + ’”‘,'Content-Type: ' + “image/” + fileType, '',atob（base64Data）， boundary,//name=imageTypeboundary,'Content-Disposition: form-data; name=“imageType”', '',fileType,boundary + '--'

].join（'\r\n’））；上面代碼使用了window.atob的api，它可以把base64還原成原始內容的字符串表示，如下圖所示：

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

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

可以把base64轉化成blob，然后再append到一個(gè)formData里面，下面的函數（來(lái)自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）；這樣就不用自己去拼一個(gè)multipart/form-data的格式數據了。

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

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

如下代碼：

let iframe = document.createElement（“iframe”）；iframe.display = “none”;iframe.name = “form-iframe”;document.body.appendChild（iframe）；// 改變form的targetform.target = “form-iframe”;iframe.onload = function（） {//獲取iframe的內容，即服務(wù)返回的數據let responseText = this.contentDocument.body.textContent|| this.contentWindow.document.body.textContent;};form.submit（）；form.submit會(huì )觸發(fā)表單提交，當請求完成（成功或者失?。┲缶蜁?huì )觸發(fā)iframe的onload事件，然后在onload事件獲取返回的數據，如果請求失敗了的話(huà)，iframe里的內容就為空，可以用這個(gè)判斷請求有沒(méi)有成功。

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

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

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

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

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