JavaScript File 對象，F(xiàn)ileList 對象，F(xiàn)ileReader 對象

File 對象 

File 對象代表一個文件，用來讀寫文件信息。它繼承了 Blob 對象，或者說是一種特殊的 Blob 對象，所有可以使用 Blob 對象的場合都可以使用它。

最常見的使用場合是表單的文件上傳控件（<input type="file">），用戶選中文件以后，瀏覽器就會生成一個數(shù)組，里面是每一個用戶選中的文件，它們都是 File 實例對象。

// HTML 代碼如下
// <input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];
file instanceof File // true

上面代碼中，file是用戶選中的第一個文件，它是 File 的實例。

構(gòu)造函數(shù) 

瀏覽器原生提供一個File()構(gòu)造函數(shù)，用來生成 File 實例對象。

new File(array, name [, options])

File()構(gòu)造函數(shù)接受三個參數(shù)。

• array：一個數(shù)組，成員可以是二進制對象或字符串，表示文件的內(nèi)容。
• name：字符串，表示文件名或文件路徑。
• options：配置對象，設(shè)置實例的屬性。該參數(shù)可選。

第三個參數(shù)配置對象，可以設(shè)置兩個屬性。

• type：字符串，表示實例對象的 MIME 類型，默認值為空字符串。
• lastModified：時間戳，表示上次修改的時間，默認為Date.now()。

下面是一個例子。

var file = new File(
  ['foo'],
  'foo.txt',
  {
    type: 'text/plain',
  }
);

實例屬性和實例方法 

File 對象有以下實例屬性。

• File.lastModified：最后修改時間
• File.name：文件名或文件路徑
• File.size：文件大小（單位字節(jié)）
• File.type：文件的 MIME 類型

var myFile = new File([], 'file.bin', {
  lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""

上面代碼中，由于myFile的內(nèi)容為空，也沒有設(shè)置 MIME 類型，所以size屬性等于0，type屬性等于空字符串。

File 對象沒有自己的實例方法，由于繼承了 Blob 對象，因此可以使用 Blob 的實例方法slice()。

FileList 對象 

FileList對象是一個類似數(shù)組的對象，代表一組選中的文件，每個成員都是一個 File 實例。它主要出現(xiàn)在兩個場合。

• 文件控件節(jié)點（<input type="file">）的files屬性，返回一個 FileList 實例。
• 拖拉一組文件時，目標區(qū)的DataTransfer.files屬性，返回一個 FileList 實例。

// HTML 代碼如下
// <input id="fileItem" type="file">
var files = document.getElementById('fileItem').files;
files instanceof FileList // true

上面代碼中，文件控件的files屬性是一個 FileList 實例。

FileList 的實例屬性主要是length，表示包含多少個文件。

FileList 的實例方法主要是item()，用來返回指定位置的實例。它接受一個整數(shù)作為參數(shù)，表示位置的序號（從零開始）。但是，由于 FileList 的實例是一個類似數(shù)組的對象，可以直接用方括號運算符，即myFileList[0]等同于myFileList.item(0)，所以一般用不到item()方法。

FileReader 對象 

FileReader 對象用于讀取 File 對象或 Blob 對象所包含的文件內(nèi)容。

瀏覽器原生提供一個FileReader構(gòu)造函數(shù)，用來生成 FileReader 實例。

var reader = new FileReader();

FileReader 有以下的實例屬性。

• FileReader.error：讀取文件時產(chǎn)生的錯誤對象
• FileReader.readyState：整數(shù)，表示讀取文件時的當前狀態(tài)。一共有三種可能的狀態(tài)，0表示尚未加載任何數(shù)據(jù)，1表示數(shù)據(jù)正在加載，2表示加載完成。
• FileReader.result：讀取完成后的文件內(nèi)容，有可能是字符串，也可能是一個 ArrayBuffer 實例。
• FileReader.onabort：abort事件（用戶終止讀取操作）的監(jiān)聽函數(shù)。
• FileReader.onerror：error事件（讀取錯誤）的監(jiān)聽函數(shù)。
• FileReader.onload：load事件（讀取操作完成）的監(jiān)聽函數(shù)，通常在這個函數(shù)里面使用result屬性，拿到文件內(nèi)容。
• FileReader.onloadstart：loadstart事件（讀取操作開始）的監(jiān)聽函數(shù)。
• FileReader.onloadend：loadend事件（讀取操作結(jié)束）的監(jiān)聽函數(shù)。
• FileReader.onprogress：progress事件（讀取操作進行中）的監(jiān)聽函數(shù)。

下面是監(jiān)聽load事件的一個例子。

// HTML 代碼如下
// <input type="file" onchange="onChange(event)">

function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target.result)
  };

  reader.readAsText(file);
}

上面代碼中，每當文件控件發(fā)生變化，就嘗試讀取第一個文件。如果讀取成功（load事件發(fā)生），就打印出文件內(nèi)容。

FileReader 有以下實例方法。

• FileReader.abort()：終止讀取操作，readyState屬性將變成2。
• FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式讀取文件，讀取完成后result屬性將返回一個 ArrayBuffer 實例。
• FileReader.readAsBinaryString()：讀取完成后，result屬性將返回原始的二進制字符串。
• FileReader.readAsDataURL()：讀取完成后，result屬性將返回一個 Data URL 格式（Base64 編碼）的字符串，代表文件內(nèi)容。對于圖片文件，這個字符串可以用于<img>元素的src屬性。注意，這個字符串不能直接進行 Base64 解碼，必須把前綴data:*/*;base64,從字符串里刪除以后，再進行解碼。
• FileReader.readAsText()：讀取完成后，result屬性將返回文件內(nèi)容的文本字符串。該方法的第一個參數(shù)是代表文件的 Blob 實例，第二個參數(shù)是可選的，表示文本編碼，默認為 UTF-8。

下面是一個例子。

/* HTML 代碼如下
  <input type="file" onchange="previewFile()">
  <img src="" height="200">
*/

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener('load', function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

上面代碼中，用戶選中圖片文件以后，腳本會自動讀取文件內(nèi)容，然后作為一個 Data URL 賦值給<img>元素的src屬性，從而把圖片展示出來。