前端網頁若要取得一個檔案，大家可能第一個畫面就是下面這個UI吧！是利用<input type="file">，選擇本地端檔案的畫面

我們透過這個方式選擇了一個檔案後，這個檔案會是怎麼呈現？“檔案”本身是什麼呢？選擇了檔案之後，我們用console印出來選擇的這個檔案如下：

可以看到這個被選擇的檔案是一個在FileList中的File的物件，那什麼是FileList, 什麼是File? 今天就讓我們深入解析一下關與檔案類的物件關係吧

FileList, File Blob關係圖

Blob物件(Binary large Object) = 二進位類型的大物件

Blob其實不是javascript獨有的。最早Blob是應用在在資料庫管理中，用於儲存影音、大型文件或圖檔。這些大型檔案，無法儲存在一般的常規資料庫中，因此有了Blob的資料型態，儲存大量的非結構化物件資料。

在前端網頁的Blob

Blob 物件為一個不可變、相當於檔案(原始資料)的類檔案物件。在前端網頁最大的貢獻應該就是可以讓我們更方便地處理檔案相關的操作ex. 分片上傳、圖檔預覽等等，後面都會接續提到。透過Blob，javaScript才能讀寫二進位資料的檔案。

Blob的屬性

Blob主要包含兩個屬性

• Blob.size(read only)：
  物件中所包含資料的大小（位元組）
• Blob.type(read only)：
  一個字串，表此 Blob 物件所包含資料的 MIME 型別。若型別未知，則值為空字串。

小小備註：MIME 型別 - MIME Type (Multipurpose Internet Mail Extensions Type)

一種用來描述檔案格式的標準化方式，Ex.圖檔可能就會是image/png。也可以稱為「媒體類型」（media type）、「内容類型」（content type)。瀏覽器通常使用MIME type，而「不是」我們一般看到的檔案的副檔名(file extention)來決定怎麼處理這份文件。

Blob的方法

• arrayBuffer
  return Promise 物件且包含 blob 所有内容的二進位格式的ArrayBuffer
• slice([start[, end[, contentType]]])
  會return一個新的blob，並可指定範圍的資料
  PS.由於File繼承自Blob，可用在開發上傳檔案的分片上傳，就是利用此方式分割檔案。
• stream
  return一個能讀取blob内容的 ReadableStream
• text
  return一個Promise物件，包含blob所有内容UTF-8格式的 USVString

File

File 繼承了 Blob，所以擁有Blob有的 size 和 type 屬性，和Blob最大的不同之處在於有實際參照到檔案系統中的檔案：簡單一點來說，就是他就是從實際的檔案產生出來的檔案物，不是新增先新增了一個物件在關聯到檔案內容。因此也新增了File多的屬性：

File的屬性

• size (blob就擁有的屬性)
• type (blob就擁有的屬性)
• name
• lastModified
• lastModifiedDate
• webkitRelativePath

怎麼產生一個File物件

前端可以透過兩個方式

1. <input type="file"> 所選擇的檔案
   
2. 拖曳中生成的DataTransfer物件中
   

FileList

透過 <input type="file">選取檔案後的物件，即為FileList，是一個可藉此存取使用者選取之檔案的類陣列物件。FileList中可以包含一個檔案或多個檔案。

選取一個檔案

選取多個檔案

參考資料

• 超好用的Blob物件：https://www.gushiciku.cn/pl/2oK7/zh-tw
• https://zhuanlan.zhihu.com/p/146577946
• https://iter01.com/543189.html