HTML5 File API 筆記 (1) 基本名詞解釋

HTML5 多了 File API,可以透過 JavaScript 來處理到本機的檔案。下面有幾個 Interface,稍微筆記一下:

FileList

HTML5 的檔案欄位支援選取多個檔案一次上傳,只需要加上 "multiple" 屬性。要拿到檔案欄位目前選取的檔案清單,可以直接跟該欄位要 files 屬性:

<input id="fileField" name="files[]" type="file" multiple />
var fileList  = document.querySelector('#fileField').files;

這樣會回傳一個 FIleList 物件回來,結構上類似陣列,有 length 屬性、也可以用 item(n) 的方法要到清單中的第 n 個檔案。其實也可以直接像陣列一樣直接跟他要 fileList[n]。這份檔案清單裡面放的是 File 物件的集合,下面會提到這個類別,但總之就是一個個檔案。

不過講這麼多,不如直接看 console 下面拿到什麼:

Blob

Blob 在 Spec 上面寫是「 不可變的 原始資料」(immutable raw data),我在這邊解讀為檔案的原始碼(不是給肉眼判讀的形式)、或稱資料片段。Blob 物件有兩個屬性:

  • size: 傳回 Blob 物件的大小(單位是 bytes)
  • type: 傳回 Blob 物件的 MIME type(例如 image/png)

Blob 物件另外帶有 slice 方法跟 close 方法,前者可以從 Blob 當中切出更小的 Blob(也就是擷取其中的片段)、後者則顧名思義是把這個 Blob「關掉」—從結果上來看就是這個 Blob 就不能再使用了。

File

既然 Blob 本身就是代表一個/一段資料或檔案,那 File 繼承 Blob 也是合情合理。從上面 FileList 的範例圖中,也可以看到 File 物件帶有跟 Blog 物件相同的屬性。

不過 File 類別比起 Blob 多了兩個屬性,分別是 namelastModifiedDate:相信這兩個屬性應該「一望即知」,不需要多做解釋。


實際要把檔案讀進來使用,需要用到 FileReader Interface,這個分第二篇來筆記。

comments powered by Disqus