利用html5 file api讀取本地檔案（如圖片、PDF等）

array_huang發表於2019-03-01
HTMLAPI

在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事件，以便在使用者選定檔案後，馬上進行讀取檔案等下一步操作：

//原生js
var 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）放到利用html5 file api讀取本地檔案（如圖片、PDF等）的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編碼並放到利用html5 file api讀取本地檔案（如圖片、PDF等）的src裡來說，效能有了很大的提升。

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

相關文章