前端FileReader讀取文件信息

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

事件處理

事件	發生時機
FileReader.onabort	處理abort，該事件在讀取操作被中斷時觸發
FileReader.onerror	處理error，該事件在讀取操作發生錯誤時觸發。
FileReader.onload	該事件在讀取操作完成時觸發
FileReader.onloadstart	該事件在讀取操作開始時觸發
FileReader.onloadend	該事件在讀取操作結束時（要么成功，要么失敗）觸發。
FileReader.onprogress	該事件在讀取Blob時觸發。

其中每過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可以獲取當前文件上傳信息，如下圖:

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

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