本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

出于安全和隱私的原因，web 應(yīng)用程序不能直接訪問(wèn)用戶設(shè)備上的文件。如果需要讀取一個(gè)或多個(gè)本地文件，可以通過(guò)使用input file和FileReader來(lái)實(shí)現(xiàn)。在這篇文章中，我們將通過(guò)一些例子來(lái)看看它是如何工作的。

文件操作的流程

獲取文件

由于瀏覽器中的 JS 無(wú)法從用戶的設(shè)備訪問(wèn)本地文件，我們需要為用戶提供一種方法來(lái)選擇一個(gè)或多個(gè)文件供我們使用。這可以通過(guò)文件選擇器來(lái)完成。

如果想允選擇多個(gè)文件，可以添加multiple屬性：

我們可以通過(guò)change事件來(lái)監(jiān)聽(tīng)文件的選擇，也可以添加另一個(gè) UI 元素讓用戶顯式地開(kāi)始對(duì)所選文件的處理。

input file 具有一個(gè)files屬性，該屬性是File對(duì)象的列表(可能有多個(gè)選擇的文件)。

File對(duì)象如下所示：

 
 
 
 

  
  
  
  
{
  
  
  
  
  name: 'test.txt',         // 所選文件的名稱
  
  
  
  
  size: 1024,               // 字節(jié)大小
  
  
  
  
  type: 'text/plain',       // 基于文件擴(kuò)展名的假定文件類型，這有可能是不正確的
  
  
  
  
  lastModified: 1234567890, // 根據(jù)用戶系統(tǒng)的最新更改的時(shí)間戳
  
  
  
  
  lastModifiedDate: // 最后修改的時(shí)間戳的日期對(duì)象
  
  
  
  
}
 
 
 
 

讀取文件

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

(1) 該對(duì)象擁有的屬性：

• 「FileReader.error」 ：只讀，一個(gè)DOMException，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤 。
• 「FileReader.readyState」：只讀 表示 FileReader 狀態(tài)的數(shù)字。取值如下：
• 「FileReader.result」：只讀，文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個(gè)方法來(lái)啟動(dòng)讀取操作。

(2) 該對(duì)象擁有的方法：

• readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個(gè)參數(shù)代表編碼格式。
• readAsDataUrl(file)：讀取文件并且將文件以數(shù)據(jù)URI的形式保存在result屬性中。
• readAsBinaryString(file)：讀取文件并且把文件以字符串保存在result屬性中。
• readAsArrayBuffer(file)：讀取文件并且將一個(gè)包含文件內(nèi)容的ArrayBuffer保存咋result屬性中。
• FileReader.abort()：中止讀取操作。在返回時(shí)，readyState屬性為DONE。

(3) 文件讀取的過(guò)程是異步操作，在這個(gè)過(guò)程中提供了三個(gè)事件：progress、error、load事件。

• progress：每隔50ms左右，會(huì)觸發(fā)一次progress事件。
• error：在無(wú)法讀取到文件信息的條件下觸發(fā)。
• load：在成功加載后就會(huì)觸發(fā)。

在下面的示例中，我們將使用readAsText和readAsDataURL方法來(lái)顯示文本和圖像文件的內(nèi)容。

例一：讀取文本文件

為了將文件內(nèi)容顯示為文本，change需要重寫一下：

 
 
 
 

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

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

首先，我們要確保有一個(gè)可以讀取的文件。如果用戶取消或以其他方式關(guān)閉文件選擇對(duì)話框而不選擇文件，我們就沒(méi)有什么要讀取和退出函數(shù)。

然后我們繼續(xù)創(chuàng)建一個(gè)FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時(shí)非常重要。

reader發(fā)出一個(gè)'load'事件(例如，類似于Image對(duì)象)，告訴我們的文件已經(jīng)讀取完畢。

reader將文件內(nèi)容保存在其result屬性中。此屬性中的數(shù)據(jù)取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個(gè)文本字符串。

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

如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個(gè)readAsDataURL方法，可以將文件讀入一個(gè)編碼的字符串，該字符串可以用作元素的源。本例的代碼與前面的代碼基本相同，區(qū)別是我們使用readAsDataURL讀取文件并將結(jié)果顯示為圖像：

 
 
 
 

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

總結(jié)

• 由于安全和隱私的原因，JavaScript 不能直接訪問(wèn)本地文件。
• 可以通過(guò) input 類型為 file 來(lái)選擇文件，并對(duì)文件進(jìn)行處理。
• file input 具有帶有所選文件的files屬性。
• 我們可以使用FileReader來(lái)訪問(wèn)所選文件的內(nèi)容。

當(dāng)前題目：JavaScript如何讀取本地文件
網(wǎng)頁(yè)地址：http://uogjgqi.cn/article/djhhceh.html