FileReader

FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。

FileReader型別實現的是一種非同步檔案獲取機制。

FileReader有一下幾種方法

• FileReader.abort()
  中止讀取操作。在返回時，readyState屬性為DONE。
• FileReader.readAsArrayBuffer()
  開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中儲存的將是被讀取檔案的 ArrayBuffer 資料物件.
• FileReader.readAsBinaryString()
  開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取檔案的原始二進位制資料。
• FileReader.readAsDataURL()
  開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的Base64字串以表示所讀取檔案的內容。
• FileReader.readAsText()
  開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字串以表示所讀取的檔案內容。

FileReader()返回一個新構造的FileReader。

想要建立一個FileReader物件,很簡單,如下:

const reader = new FileReader();

事件處理

其中每過50ms左右，就會觸發一次progress事件，可以獲取和xhr的progress相同的引數：lengthComputable/loaded和total
由於種種原因無法讀取檔案會觸發error事件

執行了error事件就不會執行load事件

讀取文字及圖片

通常我們通過input="file"來上傳檔案

 <input type="file" onchange="onFile(event)" />
 

下圖時檔案file內容：

我們可以獲取到檔名、修改時間、大小和檔案型別等資訊，檔案內容也是包含在裡面的，不過需要FileReader的讀取檔案方法才能獲取，對於純文字，我們使用readAsText方法，如下：

  const content = document.getElementsByTagName("input");
  const contentBox = document.getElementsByClassName("contents")[0]
  let files,
      type,
      urlData,
      html
  function onFile(e) {
      console.log(e);
      files = e.target.files
      console.log(files, files[0].type, 'files');
      //FileReader讀取檔案內容
      var reader = new FileReader();
      if (/image/.test(files[0].type)) {
          reader.readAsDataURL(files[0])
          type = 'image'
      } else {

          reader.readAsText(files[0]);
          type = 'text'
      }
      reader.onerror = function () {
          console.log('error');
      }
      reader.onload = function (e) {
          // urlData就是對應的檔案內容
          urlData = reader.result;
          
          switch (type) {
              case 'image':
                  html = `<img src = '${urlData}'  / >`
                  break;
              case 'text':
                  html = `<p>${urlData}</p>`
          }
          contentBox.innerHTML = html

      };
  }

讀取圖片

可以看到如果是圖片，可以將圖片檔案轉換為base64編碼，然後哦展示出來

讀取文字

可以看到如果是文字，則以字串形式讀取文字內容

onprogress

reader.onprogress = function(e){
      if(e.lengthComputable){
          progress = e.loaded / e.total
      }
      console.log(e, progress);
  }

呼叫onprogress可以獲取當前檔案上傳資訊，如下圖:

一般會用於獲取上傳百分比。

碼字不易，希望大佬指點！