在表單中我們會用到上傳文件的操作，現就文件相關API做以下總結。
文件相關的對象主要有5個。

• Blob對象: 是一個代表二進制數據的基本對象。構造函數有兩個參數，第一個參數為實際數據的數組，第二個為數據類型。

• File對象: 負責處理那些以文件形式存在的二進制數據，也就是操作本地文件。它是FileList對象的成員，包含了文件的一些元信息。有如下屬性值：

  • name: 文件名。
  • size: 文件大小，單位為字節。
  • type: 文件的MIME類型。
  • lastModified: 文件的上次修改時間，格式為時間戳。
  • lastModifiedDate: 文件的上次修改時間，格式為Date對象實例。

• FileList對象: 針對表單的file控件。當用戶通過file控件選取文件后，這個控件的files屬性值就是FileList對象。它在結構上類似于數組，包含用戶選取的多個文件。

• FileReader對象: 負責將二進制數據讀入內存內容。采用異步方式讀取文件，可以為一系列事件指定回調函數。有多種讀取文件的方式。

  • readAsBinaryString(Blob|File)：返回二進制字符串，該字符串每個字節包含一個0到255之間的整數。
  • readAsText(Blob|File, opt_encoding)：返回文本字符串。默認情況下，文本編碼格式是’UTF-8’。
  • readAsDataURL(Blob|File)：返回一個基于Base64編碼的data-uri對象。
  • readAsArrayBuffer(Blob|File)：返回一個ArrayBuffer對象。
  • abort()：中止讀取操作。
    除了上述方法外，還擁有三個只讀屬性。
  • readyState：FileReader對象的當前狀態。
  • result：讀取到的文件內容。
  • error：在讀取文件時發生的錯誤。
    事件有load,loadstart,loadend,error,abort,progress。

• URL對象: 用于生成指向File對象或Blob對象的URL。

  • createObjectURL(blob) 會對二進制數據生成一個URL。
  • revokeObjectURL(objectURL) 使URL失效。

代碼說明：

//css 
.wrap {
  position: relative;
 }
.hide {
  width: 100px;
  height: 30px;
  position: absolute;
  left: 0;
  z-index: 22;
  opacity: 0;
  cursor: pointer
}
.wrap span {
  height: 30px;
  width: 100px;
  position: absolute;
  left: 0;
  z-index: 11;
  color: blue;
  cursor: pointer;
}
//html
<div class="wrap">
  <input type="file" id="file" class="hide">
  <span>上傳文件</span>
</div>
//js
var fileDom = document.getElementById("file");        
fileDom.addEventListener('change',function(e){
  console.log(e.target.files);  // e.target.files === fileDom.files
  console.log(fileDom.files)
  var reader = new FileReader();
  reader.readAsText(e.target.files[0]);
  reader.onload = function (e) {
    console.log(e.target.result);  //e.target.result === reader.result
    console.log(reader.result);
  }
   var s = URL.createObjectURL(e.target.files[0])
   console.log(s)
})