說明
使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩衝)內容,可以使用File對象或者Blob對象來指定所要處理的文件或數據.
其中File對象可以是來自用戶在一個元素上選擇文件後返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後的返回結果.
IE10以下的版本不支持FileReader()構造函數.不過可以利用濾鏡來兼容舊版本的IE: 兼容IE的圖片本地預覽.
事件處理程序
onabort
當讀取操作被中止時調用.
onerror
當讀取操作發生錯誤時調用.
onload
當讀取操作成功完成時調用.
onloadend
當讀取操作完成時調用,不管是成功還是失敗.該處理程序在onload或者onerror之後調用.
onloadstart
當讀取操作將要開始之前調用.
onprogress
在讀取數據過程中週期性調用.狀態常量
EMPTY 0 還沒有加載任何數據.
LOADING 1 數據正在被加載.
DONE 2 已完成全部的讀取請求.例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
oFReader = new FileReader(),
// 圖片格式過濾
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
// 文件讀取後，狀態常量會標記爲DONE=2 ，此時文件加載完畢，觸發事件
oFReader.onload = function(oFREvent) {
console.log('read complete');
console.log(oFREvent);
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
// 加載圖像文件
function loadImageFile() {
// 判斷上傳的文件隊列長度
if(document.getElementById("uploadImage").files.length === 0) {
return;
}
// 每次只能上傳單個文件
var oFile = document.getElementById("uploadImage").files[0];
// 用過濾器檢驗文件類型
if(!rFilter.test(oFile.type)) {
alert("You must select a valid image file!");
return;
}
// 當讀取操作完成時,readyState屬性的值會成爲DONE,如果設置了onloadend事件處理程序,則調用之.
// URL格式的字符串以表示所讀取文件的內容.
oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body>
<form name="uploadForm" action="">
<table>
<tbody>
<tr>
<td>
<img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" />
</td>
<td>
<input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" />
</td>
</tr>
</tbody>
</table>
<p>
<!--form 內的submit 用於提交表單-->
<input type="submit" value="Send" />
</p>
</form>
</body>
</html>