利用html5 file api讀取本機檔案範例(如圖片、PDF等)

在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;});

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

 <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); { 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);}

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

首先需要實例化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相當於檔案的一個臨時路徑，此臨時路徑可隨時產生、隨時釋放，在本機瀏覽器使用起來時，與普通的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截圖或進行圖片壓縮等。當然，這一切都是要考慮相容性的。

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