使用FileReader
對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容,可以使用File
對象或者Blob
對象來指定所要讀取的文件或數據.其中File對象可以是來自用戶在一個<input>
元素上選擇文件后返回的FileList
對象,也可以來自由拖放操作生成的 DataTransfer
對象,還可以是來自在一個HTMLCanvasElement
上執行mozGetAsFile()方法后的返回結果。
創建FileReader對象,
var reader = new FileReader();
屬性:
1.result jsval 讀取的文件內容,這個屬性只在讀取操作完成之后才有效,並且數據的格式取決於讀取操作發起的方法。只讀
2.readyState unsigned short 當前狀態值,0---EMPTY 還沒有記載任何數據。1--LOADING 正在被記載。2---DONE 已完成全部的讀取請求。
3.error DOMError 在讀取文件時發生的錯誤,只讀。
方法:
void abort() ,中止讀取操作,返回時,readyState屬性值為DONE
void readAsArrayBuffer( in Blob blob), 讀取文件為 ArrayBuffer
void readAsBinaryString(in Blob blob),讀取文件為二進制字符串,IE瀏覽器不支持該方法
void readAsDataURL(in Blob blob),讀取文件為DataURL ,關於DataURL
void readAsText(in Blob blob,[optional] in DOMString encoding),指定文件編碼(默認值utf-8),讀取Blob為字符串
事件監聽:
onabort
當讀取操作被終止時調用.
onerror
當讀取操作發生錯誤時調用.
onload
當讀取操作成功完成時調用.
onloadend
當讀取操作完成時調用,不管是成功還是失敗.該處理程序在onload
或者onerror之后調用
.
onloadstart
當讀取操作將要開始之前調用.
onprogress
在讀取數據過程中周期性調用.
事件傳遞的參數對象:
//e.target FileReader //e.total 文件總大小,字節 //e.type 上傳狀態‘load’ //e.timeStamp 還不知道
瀏覽器兼容性
Desktop、Mobile
Feature | Firefox (Gecko) | Chrome | Internet Explorer* | Opera* | Safari |
---|---|---|---|---|---|
Basic support | 3.6 (1.9.2) | 7 | 10 | Not supported | Not supported |
*IE9有一個File API Lab.Opera從11.10開始部分支持該API.
實例1,檢測瀏覽器是否支持FileReader
//1.檢測瀏覽器是否支持FileReader //測試結果,IE>=10,Google,FF if (window.FileReader) { var fr = new FileReader(); console.info(fr); } else { alert("Not supported by your browser!"); }
實例2. FileReader讀取File對象,讀取文件實例
<div class="container"> <input type="file" id="file" multiple /> <input type="button" id="btn1" value="選擇上傳文件" onclick="showFiles();" /> <h4> 選擇文件如下: </h4> <blockquote></blockquote> </div>
var fileBox = document.getElementById('file'); function showFiles() { //獲取選擇文件的數組 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; readFile(file); } } //讀取文件內容 //reader.readAsArrayBuffer //將讀取結果 封裝成 ArrayBuffer ,如果想使用一般需要轉換成 Int8Array或DataView //reader.readAsBinaryString //在IE瀏覽器中不支持改方法 //reader.readAsText 該方法有兩個參數,其中第二個參數是文本的編碼方式,默認值為 UTF-8 //reader.readAsDataURL //讀取結果為DataURL //reader.readyState 上傳中的狀態 function readFile(file) { var reader = new FileReader(); //reader.readAsText(file); //中文windows系統 txt 文本多數默認編碼 gbk reader.readAsText(file, 'gbk'); console.info(reader.readyState); // 狀態值 1 reader.onload = function (e) { console.info(e); //事件對象 //e.target FileReader //e.total 文件總大小,字節 //e.type 上傳狀態‘load’ //e.timeStamp 還不知道 console.info(reader.readyState); //狀態值 2 var result = reader.result; $('.container blockquote').text(result); } }
更多實例: