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