標籤：style blog http java 使用 strong 檔案 io
HTML 5除了提供用於擷取檔案資訊的File對象外，還添加了FileSystem相關的應用介面。FileSystem對於不同的處理功能做了細緻的分類，如用於檔案讀取和處理的FileReader和FileList對象、用於建立和寫入的Blob和FileWriter對象、用於目錄和檔案系統訪問的DirectoryReader和LocalFileSystem對象等，FileSystem功能的出現是瀏覽器在檔案系統上的突破，具有裡程碑的意義，雖然目前還尚未完全成熟，但足以讓開發人員發揮更大的想象空間。
1．FileReader對象
FileReader對象專門用於讀取檔案，同時可以將檔案轉化為各種格式資訊。使用FileReader對象非常簡單，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相同。單擊“選擇檔案”按鈕，選中本地圖片，此時“選擇檔案”按鈕下方出現對應選中圖片的內容，效果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，從現在開始。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
