JavaScript 如何讀取本地文件

做者: Martin Splitt
譯者：前端小智
來源：dev

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

出於安全和隱私的緣由，web應用程序不能直接訪問用戶設備上的文件。若是須要讀取一個或多個本地文件，能夠經過使用input file和FileReader來實現。在這篇文章中，咱們將經過一些例子來看看它是如何工做的。

文件操做的流程

獲取文件

因爲瀏覽器中的 JS 沒法從用戶的設備訪問本地文件，咱們須要爲用戶提供一種方法來選擇一個或多個文件供咱們使用。這能夠經過文件選擇器<input type='fule' />來完成。

<input type="file" id="fileInput">

若是想允選擇多個文件，能夠添加multiple屬性:

<input type="file" id="fileInput" multiple>

咱們能夠經過change事件來監聽文件的選擇，也能夠添加另外一個UI元素讓用戶顯式地開始對所選文件的處理。

input file 具備一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）。

<input type="file" id="fileInput">
<script>
    document.getElementById('fileInput').addEventListener('change', function selectedFileChanged() {
      console.log(this.files); // will contain information about the file that was selected.
    });
</script>

File對象以下所示：

{
  name: 'test.txt',         // 所選文件的名稱
  size: 1024,               // 字節大小
  type: 'text/plain',       // 基於文件擴展名的假定文件類型，這有多是不正確的
  lastModified: 1234567890, // 根據用戶系統的最新更改的時間戳
  lastModifiedDate: // 最後修改的時間戳的日期對象
}

讀取文件

讀取文件，主要使用的是FileReader類。

該對象擁有的屬性：

FileReader.error ：只讀，一個DOMException，表示在讀取文件時發生的錯誤 。

FileReader.readyState：只讀 表示FileReader狀態的數字。取值以下：

常量名	值	描述
EMPTY	0	尚未加載任何數據
LOADING	1	數據正在被加載
DONE	2	已完成所有的讀取請求

FileReader.result：只讀，文件的內容。該屬性僅在讀取操做完成後纔有效，數據的格式取決於使用哪一個方法來啓動讀取操做。

該對象擁有的方法：

readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數表明編碼格式。

readAsDataUrl(file)：讀取文件而且將文件以數據URI的形式保存在result屬性中。

readAsBinaryString(file)：讀取文件而且把文件以字符串保存在result屬性中。

readAsArrayBuffer(file)：讀取文件而且將一個包含文件內容的ArrayBuffer保存咋result屬性中。

FileReader.abort()：停止讀取操做。在返回時，readyState屬性爲DONE。

文件讀取的過程是異步操做，在這個過程當中提供了三個事件：progress、error、load事件。

progress：每隔50ms左右，會觸發一次progress事件。

error：在沒法讀取到文件信息的條件下觸發。

load：在成功加載後就會觸發。

在下面的示例中，咱們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內容。

例一：讀取文本文件

爲了將文件內容顯示爲文本，change須要重寫一下：

document.getElementById('fileInput').addEventListener('change', function selectedFileChanged() {
  if (this.files.length === 0) {
    console.log('請選擇文件！');
    return;
  }

  const reader = new FileReader();
  reader.onload = function fileReadCompleted() {
    // 當讀取完成時，內容只在`reader.result`中
    console.log(reader.result);
  };
  reader.readAsText(this.files[0]);
});

首先，咱們要確保有一個能夠讀取的文件。若是用戶取消或以其餘方式關閉文件選擇對話框而不選擇文件，咱們就沒有什麼要讀取和退出函數。

而後咱們繼續建立一個FileReader。reader的工做是異步的，以免阻塞主線程和UI更新，這在讀取大文件(如視頻)時很是重要。

reader發出一個'load'事件(例如，相似於Image對象)，告訴咱們的文件已經讀取完畢。

reader將文件內容保存在其result屬性中。此屬性中的數據取決於咱們使用的讀取文件的方法。在咱們的示例中，咱們使用readAsText方法讀取文件，所以result將是一個文本字符串。

例二：顯示本地選擇的圖片

若是咱們想要顯示圖像，將文件讀取爲字符串並非頗有用。FileReader有一個readAsDataURL方法，能夠將文件讀入一個編碼的字符串，該字符串能夠用做<img>元素的源。本例的代碼與前面的代碼基本相同，區別是咱們使用readAsDataURL讀取文件並將結果顯示爲圖像:

document.getElementById('fileInput').addEventListener('change', function selectedFileChanged() {
  if (this.files.length === 0) {
    console.log('No file selected.');
    return;
  }

  const reader = new FileReader();
  reader.onload = function fileReadCompleted() {
      const img = new Image();       
      img.src = reader.result;
      document.body.appendChild(img); 
  };
  reader.readAsDataURL(this.files[0]);
});

總結

1）因爲安全和隱私的緣由，JavaScript 不能直接訪問本地文件。

2）能夠經過 input 類型爲 file 來選擇文件，並對文件進行處理。

3） file input 具備帶有所選文件的files屬性。

4） 咱們可使用FileReader來訪問所選文件的內容。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/g33konaut/read...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。