建站
咨詢
售后
建站咨詢
新聞中心
在眾多HTML5規(guī)范中，有一部分規(guī)范是跟文件處理有關(guān)的，在早期的瀏覽器技術(shù)中，處理小量字符串是js最擅長的處理之一。但文件處理，尤其是二進(jìn)制文件處理，一直是個空白。在一些情況下，我們不得不通過Flash/ActiveX/NP插件或云端的服務(wù)器處理較為復(fù)雜或底層的數(shù)據(jù)。今天，HTML5的一系列新規(guī)范正在致力于讓瀏覽器具備更強(qiáng)大的文件處理能力。
創(chuàng)新互聯(lián)專注于臨澧網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供臨澧營銷型網(wǎng)站建設(shè)，臨澧網(wǎng)站制作、臨澧網(wǎng)頁設(shè)計(jì)、臨澧網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造臨澧網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨澧網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
今天要介紹的FileAPI，就是為解決這類問題而生的。
總覽
FileAPI是一些列文件處理規(guī)范的基礎(chǔ)，包含最基礎(chǔ)的文件操作的JavaScript接口設(shè)計(jì)。其中最主要的接口定義一共有4個：
◆ FileList接口: 可以用來代表一組文件的JS對象，比如用戶通過input[type="file"]元素選中的本地文件列表
◆ Blob接口: 用來代表一段二進(jìn)制數(shù)據(jù)，并且允許我們通過JS對其數(shù)據(jù)以字節(jié)為單位進(jìn)行“切割”
◆ File接口: 用來代步一個文件，是從Blob接口繼承而來的，并在此基礎(chǔ)上增加了諸如文件名、MIME類型之類的特性
◆ FileReader接口: 提供讀取文件的方法和事件
這里有兩點(diǎn)細(xì)節(jié)需要注意：
1. 我們平時使用input[type="file"]元素都是選中單個文件，其本身是允許同時選中多個文件的，所以會用到FileList
2. Blob接口和File接口可以返回?cái)?shù)據(jù)的字節(jié)數(shù)等信息，也可以“切割”，但無法獲取真正的內(nèi)容，這也正是FileReader存在的意義，而文件大小不一時，讀取文件可能存在明顯的時間花費(fèi)，所以我們用異步的方式，通過觸發(fā)另外的事件來返回讀取到的文件內(nèi)容
接口描述
這4個接口其實(shí)并不復(fù)雜，也很好理解(接口中的“#Foo”表示任意Foo類型的對象)：
FileList接口
- #FileList[index] // 得到第index個文件
Blob接口
- #Blob.size // 只讀特性，數(shù)據(jù)的字節(jié)數(shù)
- #Blob.slice(start, length) // 將當(dāng)前文件切割并將結(jié)果返回
File接口
- #File.size // 繼承自Blob，意義同上
- #File.slice(start, length) // 繼承自Blob，意義同上
- #File.name // 只讀屬性，文件名
- #File.type // 只讀屬性，文件的MIME類型
- #File.urn // 只讀屬性，代表該文件的URN，幾乎用不到，暫且無視
FileReader方法
- #FileReader.readAsBinaryString(blob/file) // 以二進(jìn)制格式讀取文件內(nèi)容
- #FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式讀取文件內(nèi)容，并且可以強(qiáng)制選擇文件編碼
- #FileReader.readAsDataURL(file) // 以DataURL格式讀取文件內(nèi)容
- #FileReader.abort() // 終止讀取操作
FileReader事件
- #FileReader.onloadstart // 讀取操作開始時觸發(fā)
- #FileReader.onload // 讀取操作成功時觸發(fā)
- #FileReader.onloadend // 讀取操作完成時觸發(fā)(不論成功還是失敗)
- #FileReader.onprogress // 讀取操作過程中觸發(fā)
- #FileReader.onabort // 讀取操作被中斷時觸發(fā)
- #FileReader.onerror // 讀取操作失敗時觸發(fā)
FileReader屬性
- #FileReader.result // 讀取的結(jié)果(二進(jìn)制、文本或DataURL格式)
- #FileReader.readyState // 讀取操作的狀態(tài)(EMPTY、LOADING、DONE)
代碼示例
舉例一：控制file控件，讀取其中的第二個文件，并將其文本內(nèi)容在控制臺輸出
- var input = document.querySelector('input[type="file"]'); // 找到***個file控件
- var firstFile = input.files[0]; // file控件的files特性其實(shí)就是一個FileList類型的對象
- var secondFile = input.files[1]; // 當(dāng)file控件的multiple特性為true時，我們可以同時選擇多個文件，通過input.files[n]可以按序訪問這些文件
- var reader = new FileReader(); // 新建一個FileReader類型的對象
- reader.readAsText(secondFile); // 按文本格式讀取file控件中的第二個文件
- reader.onloadend = function (e) { // 綁定讀取操作完成的事件
- console.log(reader.result); // 取得讀取結(jié)果并輸出
- };
舉例二：給一個含utf-8編碼的文本文件file去掉BOM頭信息
- var size = file.size; // 先取得文件總字節(jié)數(shù)
- var result = file.slice(3, size - 3); // 用slice方法去掉開頭的3個字節(jié)
***，對FileAPI實(shí)踐的三點(diǎn)注意
1. 由于規(guī)范尚未截稿，#File.urn尚存較大變數(shù)，webkit并未實(shí)現(xiàn)此特性
2. #Blob.slice在webkit內(nèi)核中加入了前綴，即#Blob.webkitSlice，且第二個參數(shù)不是“l(fā)ength”，而是“end”，話句話說，上面的示例二應(yīng)改為file.webkitSlice(3, size)才能生效
3. 規(guī)范中還明確規(guī)定了各種出錯處理和異常處理，這些內(nèi)容是同樣重要的：不論對于一套完備的規(guī)范，還是對于一個健壯的程序而言。由于篇幅有限，這部分就不細(xì)說了，大家可以在W3C官網(wǎng)自由查閱
以上就是FileAPI的簡單介紹。萬丈高樓平地起，后面的文件操作會更神奇更有趣。
原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2344378#Content
本文題目：HTML5中的文件處理之FileAPI
分享路徑：http://www.dlmjj.cn/article/cdgeojo.html
