HTML5 FileReader的使用方法

2021-09-07 20:40:55 字數 1225 閱讀 1878

1.readastext():讀取文字檔案(可以使用txt開啟的檔案),返回文字字串,預設編碼是utf-8

2.readasbinarystring():讀取任意型別的檔案。返回二進位制字串。這個方法不是用來讀取檔案展示給使用者看,而是儲存檔案。例如:讀取檔案的內容,獲取二進位制資料,傳遞給後台,後台接收了資料之後,再將資料儲存

3.readasdataurl():讀取檔案獲取一段以data開頭的字串,這段字串的本質就是dataurl.dataurl是一種將檔案(這個檔案一般就是指影象或者能夠嵌入到文件的檔案格式)嵌入到文件的方案。dataurl是將資源轉換為base64編碼的字串形式,並且將這些內容直接儲存在url中》優化**的載入速度和執行效率。

4.abort():中斷讀取。

1.先建立檔案讀取物件

var reader=

newfilereader()

;

2.讀取檔案

var file=$(

"#myfile"

).files;

/*網頁上傳的檔案儲存在file表單元素的files屬性中,

它是乙個陣列(說明可以上傳多個檔案)*/

reader.

readasdataurl

(file[0]

);/*此方法沒有返回值,讀取完檔案之後,它會將讀取

的結果儲存在檔案讀取物件的result中,即可以通過reader.result獲取到檔案的url*/

3.獲取資料

/*獲取資料*/

/*filereader提供乙個完整的事件模型,用來捕獲讀取檔案時的狀態

* onabort:讀取檔案中斷片時觸發

* onerror:讀取錯誤時觸發

* onload:檔案讀取成功完成時觸發

* onloadend:讀取完成時觸發,無論成功還是失敗

* onloadstart:開始讀取時觸發

* onprogress:讀取檔案過程中持續觸發*/

reader.

onload

=function()

;//顯示上傳進度

reader.

onprogress

=function

(e)

HTML5 FileReader 上傳檔案讀取

new filereader function uploadimg filereader共有4種讀取方法 1.readasarraybuffer file 將檔案讀取為arraybuffer。輸出為陣列集合物件 2.readasbinarystring file 將檔案讀取為二進位制字串 當前測試好...

HTML5學習之FileReader介面

1 filereader介面的方法 filereader介面有4個方法,其中3個用來讀取檔案,另乙個用來中斷讀取。無論讀取成功或失敗,方法並不會返回讀取結果,這一結果儲存在result屬性中。filereader介面的方法 方法名引數描述 readasbinarystring file 將檔案讀取為...

HTML5學習之FileReader介面

用來把檔案讀入記憶體,並且讀取檔案中的資料。filereader介面提供了乙個非同步api,使用該api可以在瀏覽器主線程中非同步訪問檔案系統,讀取檔案中的資料。到目前文職,只有ff3.6 和chrome6.0 實現了filereader介面。1 filereader介面的方法 filereader...