javascript中可以如何讀取文件？下面本篇文章就來給大家介紹一下在javascript中讀取文件的方法，希望對大家有所幫助。

因?yàn)镴avaScript中的Web API有了新的方法File API，所以我們在瀏覽器上讀取文件并處理數(shù)據(jù)更加方便而且不需要使用到后端服務(wù)器。

FileReader就是從一個(gè)文件中讀取數(shù)據(jù)并存儲(chǔ)在一個(gè)JavaScript變量中，它與XMLHttpRequest含義差不多，都是從一個(gè)外部資源加載數(shù)據(jù)而且讀操作是異步的，這樣的好處是不會(huì)使瀏覽器堵塞。

它讀取操作的方法有多種多樣的，例如以下幾種方法：

(1)readAsText() – 以純文本的形式返回文件內(nèi)容

該readAsText()方法可用于讀取文本文件。該方法有兩個(gè)參數(shù)。第一個(gè)參數(shù)是用于File或Blob要被讀取的對象。第二個(gè)參數(shù)用于指定文件的編碼。第二個(gè)參數(shù)是可選的。如果未指定，UTF-8則默認(rèn)采用編碼。

在設(shè)置中需要在文件加載完成后設(shè)置一個(gè)事件監(jiān)聽器。onload調(diào)用事件時(shí)，我們可以檢查result屬性FileReader所獲取文件的內(nèi)容。

var file=document.getElementById("file");

var reader = new FileReader();

reader.οnlοad=function(e){

var text=reader.result;

}

reader.readAsText(file);

(2)readAsArrayBuffer() 方法

該方法將讀取一個(gè)Blob或一個(gè)File對象并生成一個(gè)ArrayBuffer。當(dāng)讀取操作完成時(shí)，readyState 變成 done(已完成)，并觸發(fā) loadend 事件，同時(shí) result 屬性中將包含一個(gè) ArrayBuffer 對象用以表示所讀取文件的數(shù)據(jù)，ArrayBuffer 是固定長度的二進(jìn)制數(shù)據(jù)緩沖區(qū)。

在操作文件時(shí)比如將JPEG圖像轉(zhuǎn)換為PNG。

var file=document.getElementById("file");

var reader = new FileReader();

reader.οnlοad=function(e){

var readAsArrayBuffer=reader.result;

}

reader.readAsArrayBuffer(file);

(3)readAsDataURL() 使用數(shù)據(jù)URL的形式返回文件內(nèi)容

該方法接受File或Blob生成數(shù)據(jù)URL，這基本上是文件數(shù)據(jù)的base64編碼字符串可以將此數(shù)據(jù)URL用于設(shè)置src圖像屬性等內(nèi)容

var file=document.getElementById("file");

var reader = new FileReader();

reader.οnlοad=function(e){

var dataURL = reader.result;

}

reader.readAsDataURL(file);

上面的三種方法在使用過程中要在開始讀取之前，必須監(jiān)聽load事件，而event.target.result是返回讀取的結(jié)果。

總結(jié)

以上是生活随笔為你收集整理的html读取在线文件,javascript中如何读取文件？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。