用來把文件讀入內存，並且讀取文件中的數據。FileReader接口提供了一個異步API，使用該API可以在瀏覽器主線程中異步訪問文件系統，讀取文件中的數據。到目前文職，只有FF3.6+和Chrome6.0+實現了FileReader接口。
1、FileReader接口的方法
FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中。
| 方法名 | 參數 | 描述 |
|---|---|---|
| readAsBinaryString | file | 將文件讀取為二進制編碼 |
| readAsText | file,[encoding] | 將文件讀取為文本 |
| readAsDataURL | file | 將文件讀取為DataURL |
| abort | (none) | 終端讀取操作 |
2、FileReader接口事件
FileReader接口包含了一套完整的事件模型，用於捕獲讀取文件時的狀態。
| 事件 | 描述 |
| onabort | 中斷 |
| onerror | 出錯 |
| onloadstart | 開始 |
| onprogress | 正在讀取 |
| onload | 成功讀取 |
| onloadend | 讀取完成，無論成功失敗 |
3、FileReader接口的使用
- <script type="text/javascript">
- var result=document.getElementById("result");
- var file=document.getElementById("file");
- //判斷瀏覽器是否支持FileReader接口
- if(typeof FileReader == 'undefined'){
- result.InnerHTML="<p>你的瀏覽器不支持FileReader接口！</p>";
- //使選擇控件不可操作
- file.setAttribute("disabled","disabled");
- }
- function readAsDataURL(){
- //檢驗是否為圖像文件
- var file = document.getElementById("file").files[0];
- if(!/image\/\w+/.test(file.type)){
- alert("看清楚，這個需要圖片！");
- return false;
- }
- var reader = new FileReader();
- //將文件以Data URL形式讀入頁面
- reader.readAsDataURL(file);
- reader.onload=function(e){
- var result=document.getElementById("result");
- //顯示文件
- result.innerHTML='<img src="' + this.result +'" alt="" />';
- }
- }
- function readAsBinaryString(){
- var file = document.getElementById("file").files[0];
- var reader = new FileReader();
- //將文件以二進制形式讀入頁面
- reader.readAsBinaryString(file);
- reader.onload=function(f){
- var result=document.getElementById("result");
- //顯示文件
- result.innerHTML=this.result;
- }
- }
- function readAsText(){
- var file = document.getElementById("file").files[0];
- var reader = new FileReader();
- //將文件以文本形式讀入頁面
- reader.readAsText(file);
- reader.onload=function(f){
- var result=document.getElementById("result");
- //顯示文件
- result.innerHTML=this.result;
- }
- }
- </script>
- <p>
- <label>請選擇一個文件：</label>
- <input type="file" id="file" />
- <input type="button" value="讀取圖像" onclick="readAsDataURL()" />
- <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />
- <input type="button" value="讀取文本文件" onclick="readAsText()" />
- </p>
- <div id="result" name="result"></div>
我測試的
可以完整的顯示出來圖片，只需要將內容貼到任何地方都可以顯示出來圖片，很方便。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖拽本地圖片到頁面指定元素內</title>
</head>
<body>
<input type="file" id="file" onchange="change(this)">
<div id="dropBox" style="float:left;width:400px;height:300px;margin:10px 0 0 0;border:1px solid #015EAC;color:#666;overflow:hidden;clear:left;font-size:12px;">拖拽圖片到這里！</div>
<script type="text/javascript">
var oDropBox = document.getElementById('dropBox'),
oImgInfo = document.getElementById('imgInfo');
oDropBox.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
if (window.FileReader) {
var fileList = e.dataTransfer.files, //獲取拖拽文件
fileType = fileList[0].type,
oImg = document.createElement('img'),
reader = new FileReader();
if (fileType.indexOf('image') == -1) {
alert('請拖拽圖片~');
return;
}
reader.onload = function(e) {
oImg.src = this.result;
oDropBox.innerHTML = '';
oDropBox.appendChild(oImg);
oImgInfo.innerHTML = this.result;
}
reader.readAsDataURL(fileList[0])
} else {
alert("buzhichi");
}
}
function change(fileItem){
var oImg = document.createElement('img')
if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9，IE9也可以用濾鏡來實現
oFReader = new FileReader();
oFReader.readAsDataURL(fileItem.files[0]);
oFReader.onload = function (oFREvent) {oImg.src = oFREvent.target.result;};
}
else if (document.all) {//IE8-
fileItem.select();
var reallocalpath = document.selection.createRange().text//IE下獲取實際的本地文件路徑
if (window.ie6) {
oImg.src = reallocalpath;
}//IE6瀏覽器設置img的src為本地路徑可以直接顯示圖片
else {
//非IE6版本的IE由於安全問題直接設置img的src無法顯示本地圖片，但是可以通過濾鏡來實現，IE10瀏覽器不支持濾鏡，需要用FileReader來實現，所以注意判斷FileReader先
oImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
oImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//設置img的src為base64編碼的透明圖片，要不會顯示紅xx
}
}
else if (fileItem.files) {//firefox6-
if (fileItem.files.item(0)) {
url = fileItem.files.item(0).getAsDataURL();
oImg.src = url;
}
}
oDropBox.innerHTML = '';
oDropBox.appendChild(oImg);
}
</script>
</body>
</html>