如何使用JavaScript讀取文件

如何使用JavaScript讀取文件，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

讀取方法：1、用“readAsText(file, encoding)”；

2、用“readAsDataUrl(file)”；

3、用“readAsBinaryString(file)”；

4、用readAsArrayBuffer(file)”。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

出于安全和隱私的原因，web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實現。在這篇文章中，我們將通過一些例子來看看它是如何工作的。

讀取文件

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

「該對象擁有的屬性：」

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

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

常量名值描述EMPTY0還沒有加載任何數據LOADING1數據正在被加載DONE2已完成全部的讀取請求

「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需要重寫一下：

首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數。

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

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

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

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

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

看完上述內容，你們掌握如何使用JavaScript讀取文件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！