JavaScript讀取本地文件常用方法流程解析
出于安全和隱私的原因，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ò)文件選擇器<input type='fule' />來(lái)完成。
<input type="file">
如果想允選擇多個(gè)文件，可以添加multiple屬性:
<input type="file" multiple>
我們可以通過(guò)change事件來(lái)監(jiān)聽(tīng)文件的選擇，也可以添加另一個(gè) UI 元素讓用戶顯式地開(kāi)始對(duì)所選文件的處理。
input file 具有一個(gè)files屬性，該屬性是File對(duì)象的列表（可能有多個(gè)選擇的文件）。
File對(duì)象如下所示：
讀取文件
讀取文件，主要使用的是[FileReader][1]類。
「該對(duì)象擁有的屬性：」
「FileReader.error」：只讀，一個(gè)DOMException，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤 。
「FileReader.readyState」：只讀 表示 FileReader 狀態(tài)的數(shù)字。取值如下：
常量名值描述EMPTY0還沒(méi)有加載任何數(shù)據(jù)LOADING1數(shù)據(jù)正在被加載DONE2已完成全部的讀取請(qǐng)求
「FileReader.result」：只讀，文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個(gè)方法來(lái)啟動(dòng)讀取操作。
「該對(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。
「文件讀取的過(guò)程是異步操作，在這個(gè)過(guò)程中提供了三個(gè)事件：progress、error、load事件?！?/p>
progress：每隔50ms左右，會(huì)觸發(fā)一次progress事件。
error：在無(wú)法讀取到文件信息的條件下觸發(fā)。
load：在成功加載后就會(huì)觸發(fā)。
在下面的示例中，我們將使用readAsText和readAsDataURL方法來(lái)顯示文本和圖像文件的內(nèi)容。
例一：讀取文本文件
為了將文件內(nèi)容顯示為文本，change需要重寫一下：
首先，我們要確保有一個(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è)編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區(qū)別是我們使用readAsDataURL讀取文件并將結(jié)果顯示為圖像:
總結(jié)
1）由于安全和隱私的原因，JavaScript 不能直接訪問(wèn)本地文件。
2）可以通過(guò) input 類型為 file 來(lái)選擇文件，并對(duì)文件進(jìn)行處理。
3） file input 具有帶有所選文件的files屬性。
4） 我們可以使用FileReader來(lái)訪問(wèn)所選文件的內(nèi)容。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS設(shè)置獲取cookies的方法，有需要的朋友可以參考一下2014-01-01
JavaScript實(shí)現(xiàn)移動(dòng)端頁(yè)面按手機(jī)屏幕分辨率自動(dòng)縮放的最強(qiáng)代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動(dòng)端頁(yè)面按手機(jī)屏幕分辨率自動(dòng)縮放的最強(qiáng)代碼，通過(guò)阻止瀏覽器的默認(rèn)行為各方面分析縮放的功能實(shí)現(xiàn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
可能很多朋友認(rèn)為undefined是在js中未定義變量時(shí)才會(huì)提示的錯(cuò)誤,其實(shí)不然undefined 是js中的一特殊的變量,我們也可以提前定義哦,下面這篇文章主要給大家介紹了關(guān)于js中undefined該怎么判斷的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JavaScript之clipboard用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
JavaScript實(shí)現(xiàn)圖片輪播的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片輪播的方法,使用純javascript實(shí)現(xiàn)圖片輪播切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
JS是通過(guò)事件隊(duì)列(Event?Loop)的方式來(lái)實(shí)現(xiàn)異步回調(diào)的，但對(duì)很多初學(xué)JS的人來(lái)說(shuō)，根本搞不清楚單線程的JS為什么擁有異步的能力，所以本文將從進(jìn)程、線程的角度來(lái)解釋這個(gè)問(wèn)題2023-05-05
本文給大家匯總介紹了集中常見(jiàn)的功能，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
js實(shí)現(xiàn)的八點(diǎn)拖動(dòng)修改div大小的代碼
八點(diǎn)改變div大小的實(shí)現(xiàn)代碼，代碼相對(duì)來(lái)說(shuō)并不多，需要的朋友可以參考下。2010-02-02
繼承是面向?qū)ο缶幊讨杏忠环浅Ｖ匾母拍?，JavaScript支持實(shí)現(xiàn)繼承，不支持接口繼承，實(shí)現(xiàn)繼承主要依靠原型鏈來(lái)實(shí)現(xiàn)的2017-06-06