JavaScript文件處理 File API

JavaScript文件處理 File API
支持File API的瀏覽器有IE10+,Firefox3.5+,Opera10.6+,Safari5+,Chrome。

1.在表單元素上<input type="fiel" name="file" id="file" />,可以選擇一個或多個文件,通過獲取文件元素對象的集合files,來操作每一個對象files[i];

用法:DOM操作

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

  var file=files.files;//每一個file對象對應一個文件。

  file.name//獲取本地文件系統的文件名。

  file.size//文件的字節大小。

  file.type//字符串類型,文件的MIME類型。

  file.lastModifiedDate//文件的最後修改時間。(只使用於Chrome瀏覽器)

2.通過FileReader類型讀取文件中的數據(異步文件讀取)

FileReader()
返回一個新構造的FileReader。
有關詳細信息和示例,請參閱如何在web應用程序中使用文件。

屬性
FileReader.error 只讀
一個DOMException,表示在讀取文件時發生的錯誤 。
FileReader.readyState 只讀
表示FileReader狀態的數字。取值如下:
常量名	值	描述
EMPTY	0	還沒有加載任何數據.
LOADING	1	數據正在被加載.
DONE	2	已完成全部的讀取請求.
FileReader.result 只讀
文件的內容。該屬性僅在讀取操作完成後纔有效,數據的格式取決於使用哪個方法來啓動讀取操作。
事件處理
FileReader.onabort
處理abort事件。該事件在讀取操作被中斷時觸發。
FileReader.onerror
處理error事件。該事件在讀取操作發生錯誤時觸發。
FileReader.onload
處理load事件。該事件在讀取操作完成時觸發。
FileReader.onloadstart
處理loadstart事件。該事件在讀取操作開始時觸發。
FileReader.onloadend
處理loadend事件。該事件在讀取操作結束時(要麼成功,要麼失敗)觸發。
FileReader.onprogress
處理progress事件。該事件在讀取Blob時觸發。
因爲 FileReader 繼承自EventTarget,所以所有這些事件也可以通過addEventListener方法使用。

方法
FileReader.abort()
中止讀取操作。在返回時,readyState屬性爲DONE。
FileReader.readAsArrayBuffer()
開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.
FileReader.readAsBinaryString() 
開始讀取指定的Blob中的內容。一旦完成,result屬性中將包含所讀取文件的原始二進制數據。
FileReader.readAsDataURL()
開始讀取指定的Blob中的內容。一旦完成,result屬性中將包含一個data: URL格式的Base64字符串以表示所讀取文件的內容。
FileReader.readAsText()
開始讀取指定的Blob中的內容。一旦完成,result屬性中將包含一個字符串以表示所讀取的文件內容。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章