免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...
HTML 5除了提供用于獲取文件信息的File對象外，還加入了FileSystem相關(guān)的應(yīng)用接口。
FileSystem對于不同的處理功能做了仔細的分類，如用于文件讀取和處理的FileReader和FileList對象、用于創(chuàng)建和寫入的Blob和FileWriter對象、用于文件夾和文件系統(tǒng)訪問的DirectoryReader和LocalFileSystem對象等。FileSystem功能的出現(xiàn)是瀏覽器在文件系統(tǒng)上的突破，具有里程碑的意義，盡管眼下還尚未全然成熟。但足以讓開發(fā)人員發(fā)揮更大的想象空間。
1．FileReader對象
FileReader對象專門用于讀取文件。同一時候能夠?qū)⑽募D(zhuǎn)化為各種格式信息。
使用FileReader對象很easy，FileReader對象實例一共包括4個方法，如表2.8所看到的。
表2.8?FileReader對象方法
| 方法名稱 | 說明 |
| readAsBinaryString | 將文件讀取為二進制碼 |
| readAsDataURL | 將文件讀取為DataURL，一段是以data:開頭的字符串 |
| readAsText | 將文件讀取為文本，第2個參數(shù)為編碼類型，默覺得UTF-8 |
| abort | 中斷讀取 |
以下通過演示樣例展現(xiàn)FileReader對象中readAsDataURL方法的使用。代碼例如以下：
<!DOCTYPE html> <html> <body><input type="file" id="input"><br> <!-- 文件選擇控件 --><img id="img"/> <!-- 圖片展示 --> </body> <script type="text/javascript">document.getElementById("input").addEventListener("change", function () {// 監(jiān)聽選擇控件change事件var fileReader = new FileReader(); // 新建FileReader對象實例fileReader.onloadend = function(e) { // 監(jiān)聽實例loadend事件document.getElementById("img").src = e.target.result; // 設(shè)置圖片base64值};fileReader.readAsDataURL(this.files[0]); // 讀取文件內(nèi)容}, false); </script> </html>提示：本節(jié)FileSystem的演示樣例代碼均在Chrome 28下測試通過。
演示樣例打開執(zhí)行效果與圖2.19同樣。單擊“選擇文件”button。選中本地圖片，此時“選擇文件”button下方出現(xiàn)相應(yīng)選中圖片的內(nèi)容，效果如圖2.21所看到的。
圖2.21? FileReader對象readAsDataURL方法使用
演示樣例中，當(dāng)用戶選中圖片時。觸發(fā)input元素的change事件。在回調(diào)事件中新建一個FileReader對象的實例用于讀取圖片文件內(nèi)容。被讀取的圖片文件返回格式例如以下：
data:[<MIME-type>][;charset=<encoding>][;base64],<data>圖片被轉(zhuǎn)化為DataURL數(shù)據(jù)，即Base64格式數(shù)據(jù)。該數(shù)據(jù)能夠被賦予圖片元素的src屬性獲得并顯示。
提示：Base64數(shù)據(jù)格式的說明能夠參考網(wǎng)址http://en.wikipedia.org/wiki/Data_URI_scheme。
FileReader作為FileSystem中的一部分。通經(jīng)常使用于文件讀取。能夠結(jié)合上傳文件場景使用。
想了解FileSystem中其它的部分語法和演示樣例，來本書看看吧。
學(xué)習(xí)HTML5最好的書就是《HTML5網(wǎng)頁開發(fā)實例具體解釋》，用代碼學(xué)習(xí)用案例學(xué)習(xí)，可比看文字有趣多了！
！
！
一本書搞定HTML5，從如今開始。
總結(jié)
以上是生活随笔為你收集整理的免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Centos7安装配置Xhgui
- 下一篇： Shark集群搭建配置