文件上傳功能現在是越來越普遍，所有的社交網站，媒體網站，比如優酷視頻，微博等，都提供了上傳圖片，上傳視頻等功能。但過去WEB程序員都很清楚，用HTML表單上傳文件是很麻煩的事情，特別是你想了解一下用戶上傳的文件的一些屬性，必須等它上傳完成後才能知道。
未知的東西上傳到服務器上，有可能產生安全問題，也有可能體積太大，超過允許，浪費空間。現在好了，WEB技術在進步，HTML5帶來了很多好東西。這個FileReader API就能讓你在用戶上傳之前就能獲取上傳文件的一些基本屬性。
HTML代碼
這個FileReader API 的工作原理和 File API 一樣，需要使用input[type="file"] 元素：
<-- 一個能上傳多媒體文件的表單 --> <input type="file" id="upload-file" multiple /> <-- 顯示圖片的地方 --> <div id="destination"></div>
在File API這篇文章裡有詳細的關於能讀取到的文件的相關信息，比如地址，體積，尺寸大小，文件類型等等。
JavaScript
這個例子中我們用input表單域上傳一張圖片，當用戶在自己的電腦裡選中一張圖片後，這個圖片會被顯示到頁面上：
document.getElementById('upload-file').addEventListener('change', function() {
var file;
var destination = document.getElementById('destination');
destination.innerHTML = '';
// 循環用戶多選的文件
for(var x = 0, xlen = this.files.length; x < xlen; x++) {
file = this.files[x];
if(file.type.indexOf('image') != -1) { // 非常簡單的交驗
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result; // 顯示圖片的地方
destination.appendChild(img);
};
reader.readAsDataURL(file);
}
}
});
這個例子裡，我們使用FileReader裡的readAsDataURL方法將圖片內容轉換成base64編碼的字符串，然後使用圖片的data URI方式顯示它。其它的FileReader讀取方法還有readAsText, readAsArrayBuffer和readAsBinaryString等
有了這個FileReader API，我們就可以避免用戶先將文件上傳到服務器，在浏覽器客戶端我們就可以進行操作。這些在上傳到服務器前的預處理是很有必要的。
以上就是本文的全部內容，希望對大家的學習有所幫助。