在html4的年代，我們如果要在網頁上呈現一張用戶本地的圖片，需要用戶先把圖片上傳到服務器，再根據服務器提供的圖片地址把圖片下載下來，才能把圖片在網頁上呈現出來。這一來二往，起碼已經費了兩倍于這張圖片的流量了，更別說服務器為了存儲這張圖片所花費的資源以及用戶上傳錯了圖片的冤枉成本（因為在html4時代，用戶選擇好圖片后，往往只能看到圖片的文件名，而無法通過預覽圖來進一步確認這張圖片是否就是自己想要上傳的）。

html5提供了新玩法，光靠瀏覽器，就可以對本地的（其實也可以是遠程的）文件（主要是圖片）進行呈現、讀取、處理等操作，而這一切，則是通過html5 file api來實現的。
首先是數據結構，html5定義了一個file對象類型來表示文件，每個file對象對應一個文件。file對象有3個屬性：name、size、type。name是不包含路徑的文件名，size是以字節為單位的文件體積大小，type則是文件的MIME（例如image/jpg）。

file對象不單獨存在，而是以數組形式，存在一個名為FileList的數組中。那么，如何拿到這個FileList數組呢？目前，html5有兩個途徑可以拿到FileList，一是通過file類型的input，二是通過拖放操作的drop事件。
通過file類型的input獲取FileList

<input id="file-input" type="file" />

或html5新增的可進行文件多選的multiple屬性：

<input id="file-input" type="file" multiple />

一般，我們都是給input:file綁上一個onchange事件，以便在用戶選定文件后，馬上進行讀取文件等下一步操作：

//原生jsvar inputElement = document.getElementById("file-input");inputElement.addEventListener("change", handleFiles, false);function handleFiles() {  var fileList = this.files; }//jquery版$('#file-input').on('change', function() {    var fileList = this.files;});

通過拖放操作drop事件

首先要設定一個可供拖放的區域：

<div id="dropbox" style="width: 200px;height: 200px;"></div>

另外，為了能觸發drop事件，我們必須阻止dragenter和dragover事件的默認行為：

var dropbox;dropbox = document.getElementById("dropbox");dropbox.addEventListener("dragenter", dragenter, false);dropbox.addEventListener("dragover", dragover, false);dropbox.addEventListener("drop", drop, false);function dragenter(e) {  e.stopPropagation();  e.preventDefault();}function dragover(e) {  e.stopPropagation();  e.preventDefault();}

然后，我們就可以在drop事件的callback中，獲取到fileList：

function drop(e) {  e.stopPropagation();  e.preventDefault();  var dt = e.dataTransfer;  var files = dt.files;  handleFiles(files);}

怎么讀取或利用file對象呢？

html5提供了兩個方案：FileReader和ObjectUrl。

使用FileReader讀取file對象

首先需要實例化FileReader對象：

var reader = new FileReader();

利用FileReader讀取file對象是一個異步的過程，我們需要先為FileReader設置好load事件的callback，告知FileReader在讀取到file對象的數據后應該進行什么進一步的操作：

reader.onload = function(e) {     document.getElementById("image").src = e.target.result; }

上面這段代碼的意思是，FileReader讀取到圖片的數據后，把數據（DataUrl）放到的src屬性里。

最后，就是通過FileReader不同的方法，來決定讀取file對象數據后用什么數據格式來存放，并實施讀取：

1. readAsArrayBuffer(file) ：讀取file對象并存放為ArrayBuffer對象（ArrayBuffer對象是什么我暫時沒有搞清，應該是一種為了高效存取數據而產生的數據結構）。
2. readAsText(file [, 'UTF-8']) ：以一般文本模式讀取file對象，值得注意的是，利用第二個參數（可選）可指定字符編碼。
3. readAsDataURL(file) ：讀取file對象并存放為data: URL格式的字符串。

利用ObjectURL

ObjectURL相當于文件的一個臨時路徑，此臨時路徑可隨時生成、隨時釋放，在本地瀏覽器使用起來時，與普通的url無異。

以把一張本地圖片顯示在頁面上為例：

var img = document.createElement("img");img.src = window.URL.createObjectURL(file);

此時，src形如：blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

用這個src就能讓瀏覽器從本地讀取圖片。

這種方案相對用FileReader生成圖片的base64編碼并放到的src里來說，性能有了很大的提升。

比較這兩種讀取File對象的方案，FileReader適合用來上傳文件，而ObjectURL則適合直接在瀏覽器進行操作，然后操作后再把處理后的數據進行上傳，例如利用canvas截圖或進行圖片壓縮等。當然，這一切都是要考慮兼容性的。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。