如果想要讀取或瀏覽文件，則需要通過FileReader接口，該接口不僅可以讀取圖片文件，還可以讀取文本或二進制文件，同時，根據該接口提供的事件與方法，可以動態偵察文件讀取時的詳細狀態，接下來，我們詳細介紹FileReader接口的使用方法。
FileReader 接口
FileReader 接口提供了一個異步的API，通過這個API可以從瀏覽器主線程中異步訪問文件系統中的數據，基於此原因，FileReader 接口可以讀取文件中的數據，並將讀取的數據放入內存中。
當訪問不同文件時，必須重新調用FileReader 接口的構造函數，因為每調用一次，FileReader 接口都將返回一個新的FileReader對象，只有這樣，才能實現訪問不同文件的數據。
FileReader 接口提供了一整套完整的事件處理機制，用於偵察FileReader對象讀取或返回數據時的各種進程狀態，FileReader接口的常用事件如下表所示：
在FileReader 接口中，除提供了常用事件外，還擁有許多常用的方法，用於讀取文件或響應事件，如onabort事件觸發時，就要調用abort()方法，FileReader接口的常用方法如下表所示：
針對FileReader 接口中的方法，使用說明如下：
調用readAsBinaryString()方法時，將file對象返回的數據塊，作為一個二進制字符串的形式，分塊讀入內存中。
調用readAsArrayBuffer()方法時，將file對象返回的數據字節數，以數組緩沖的方式讀入內存中。
調用readAsText()方法時，其中encoding參數表示文本文件編碼的方式，默認值為utf-8,即以utf-8編碼格式，將獲取的數據塊按文本方式讀入內存中。
調用readAsDataURL()方法時，將file對象返回的數據塊，以一串數據URL字符的形式展示在頁面中，這種方法一般讀取數據塊較小的文件。
使用FileReader方法預覽圖片文件
在前面的實例中，通過Blob接口，可以訪問文件數據塊，獲取文件相關信息。但如果想要讀取文件，還需要通過fileReader 接口中的方法，將數據讀入內存或頁面中，例如，尺寸較小的圖片文件，可以通過fileReader 接口中的readAsDataURL()方法，獲取API異步讀取的文件數據，另存為數據URL，將該URL綁定<img>元素的“src”屬性值，就可以實現圖片文件預覽的效果。
下面通過一個實例介紹使用readAsDataURL()方法預覽圖片的過程。
實例 使用readAsDataURL()方法預覽圖片
1．功能描述
在頁面表單中，添加一個“file”類型的<input>元素，用於選擇上傳文件，並設置屬性“multiple”的值為“true”，表示允許上傳多個文件，點擊“選擇文件”按鈕后，如果選擇的是圖片文件，將在頁面中顯示，實現上傳之前的圖片預覽功能。
2．實現代碼
代碼清單 使用readAsDataURL()方法預覽圖片
在實例中，頁面導入一個JavaScript文件js6.js，在該文件中，調用fileUpload_PrevImageFile() 方法，該方法訪問fileReader接口，將文件以數據URL的方式返回頁面，其實現的代碼如代碼清單5-6-2所示：
代碼清單實例中的JavaScript文件js6.js的源碼
3． 頁面效果
該頁面在Chrome 10瀏覽器中執行的頁面效果如圖所示：
4． 源碼分析
在本實例中，圖片預覽的過程實質上是圖片文件被讀取后展示在頁面中的過程，為了實現這一過程，需要引用FileReader 接口中提供的讀取文件方法readAsDataURL()，在引用接口前，考慮到各瀏覽器對接口的兼容性不一樣，JavaScript代碼首先檢測用戶的瀏覽器是否支持FileReader對象，如果不支持，則提示出錯信息。
接下來，在JavaScript代碼中，遍歷傳回的上傳文件集合，獲取每個“file”對象，由於每個文件返回的數據塊都不同，因此，每次在讀取文件前，必須先重構一個新的FileReader對象，然后，將每個文件以數據URL的方式讀入頁面中，當讀取成功時，觸發（onload）事件，在該事件中，通過result屬性獲取文件讀入頁面中的URL地址，並將該地址與<img>元素進行綁定，最后，通過列表ID號為“ulUpload”的列表元素，展示在頁面中，從而實現上傳圖片文件預覽的效果，詳細實現過程如JavaScript代碼中加粗部分所示。
轉載地址：http://blog.sina.com.cn/s/blog_8e39cdcf0102wkbl.html