【JavaScript 教程】瀏覽器—File 對(duì)象，F(xiàn)ileList 對(duì)象，F(xiàn)ileReader 對(duì)象

1、File 對(duì)象

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

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

new File(array, name [, options])

• array：一個(gè)數(shù)組，成員可以是二進(jìn)制對(duì)象或字符串，表示文件的內(nèi)容。

• name：字符串，表示文件名或文件路徑。

• options：配置對(duì)象，設(shè)置實(shí)例的屬性。該參數(shù)可選。

• type：字符串，表示實(shí)例對(duì)象的 MIME 類型，默認(rèn)值為空字符串。

• lastModified：時(shí)間戳，表示上次修改的時(shí)間，默認(rèn)為Date.now()。

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

1.2、實(shí)例屬性和實(shí)例方法

• File.lastModified：最后修改時(shí)間

• 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 // ""

2、FileList 對(duì)象

• 文件控件節(jié)點(diǎn)（）的files屬性，返回一個(gè) FileList 實(shí)例。

• 拖拉一組文件時(shí)，目標(biāo)區(qū)的DataTransfer.files屬性，返回一個(gè) FileList 實(shí)例。

// HTML 代碼如下
// 
var files = document.getElementById('fileItem').files;
files instanceof FileList // true

3、FileReader 對(duì)象

var reader = new FileReader();

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

// HTML 代碼如下
// 

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

• FileReader.abort()：終止讀取操作，readyState屬性將變成2。
• FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式讀取文件，讀取完成后result屬性將返回一個(gè) ArrayBuffer 實(shí)例。
• FileReader.readAsBinaryString()：讀取完成后，result屬性將返回原始的二進(jìn)制字符串。
• FileReader.readAsDataURL()：讀取完成后，result屬性將返回一個(gè) Data URL 格式（Base64 編碼）的字符串，代表文件內(nèi)容。對(duì)于圖片文件，這個(gè)字符串可以用于
  */
  
  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);
  }
  }

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

  推薦閱讀

  【JavaScript 教程】瀏覽器模型—Cookie
  

  Navigator 對(duì)象，Screen 對(duì)象。
  

  【JavaScript 教程】瀏覽器—window 對(duì)象
  

  【JavaScript 教程】瀏覽器—瀏覽器環(huán)境概述

  XMLHttpRequest 對(duì)象
  

  【JavaScript 教程】瀏覽器—同源限制
  

  【JavaScript 教程】瀏覽器—CORS 通信

  【JavaScript 教程】瀏覽器—Storage 接口
  

  【JavaScript 教程】瀏覽器—History 對(duì)象
  

  Location對(duì)象，URL對(duì)象，URLSearchParams;對(duì)象

  【JavaScript?教程】瀏覽器—ArrayBuffer對(duì)象，Blob對(duì)象