js文件處理 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有一下幾種讀取文件數據的方法

1）.readAsText(file,encoding);以純文本的形式讀取文件，將讀取到的文件保存到result屬性。encoding參數用於指定編碼類型，是可選的。

2）.readAsDataURL(file);讀取文件並將文件數據以URL形式保存到result屬性中。（讀取圖像文件經常使用方法）

3）.readAsBinaryString(file);讀取文件並將一個字符串保存在result屬性中，字符串中的每一個字符表示一字節。

4）.readAsArrayBuffer(file);讀取文件並將一個包含文件內容的ArrayBuffer保存在result屬性中。

3.FileReader提供了幾個事件最有用的三個事件，progress,error,load,分別表示是否又讀取了新數據，是否發生了錯誤，是否已經讀完整個文件。

使用方法：

var reader=new FileReader();

if(/image/.test(file[0].type)){//操做圖像

　　reader.readAsDataURL(file[0]);

　　var type='image';

}else{//操做文本

　　read.readAsText(file[0]);

　　var type='text';

}

reader.onerror=function(){

　　//出錯時執行

}

reder.onprogress=function(){

//有加載新數據時執行

}

reder.onload=function(){

　　if（type=='image'）{

　　　　var html="<img src=\" "+reader.result+" \">";//已經加載完了執行

　　}else if(type='text'){

　　　　var html=reader.result

　　}

　　Obj.innerHTML=html;//顯示在指定元素對象上

}