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 拖拽圖片預覽
要實現的過程如下
拖拽任意一文件，本例以圖片爲例。當拖拽圖片到頁面左側帶+號的盒子時，圖片會出現在右側的盒子裏。
------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
html：
<div id="box">+</div>
<div id="box2"></div>
js:
var box=document.getElementById("box");
var box2=document.getElementById("box2");
box.οndragοver=function(e)
{ e=e||window.event
e.preventDefault();
this.style.background="#ddd"
}
box.οndrοp=function(e)
{ e.preventDefault();
this.style.background="#fff"
var files=e.dataTransfer.files; //通過event時間對象的dataTransfer屬性來獲取所有的文件列表
for(var i=0;i<files.length;i++)
{
if(files[i].type.indexOf("image")!=-1) //判斷文件類型是否爲圖片
{
var fReader=new FileReader();
fReader.readAsDataURL(files[i]);
fReader.οnlοad=function()
{
var img=document.createElement("img");
img.src=this.result;
box2.appendChild(img)
}
}else
{ alert("無法獲取信息，您拖入的不是圖片文件")
}
}
}
重點： var files=e.dataTransfer.files; //通過event時間對象的dataTransfer屬性來獲取所有的文件列表
實例2：上傳圖片並且本地預覽圖片（表單file操作）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" name="file" id="file"></br>
<input type="button" name="btn" value="讀取圖像" id="btn">
<div id="picBox"><img src="" width="300" height="530" id="img"/></div>
</body>
</html>
js部分：
var flObj=document.getElementById("file")
var btn=document.getElementById("btn");
btn.οnclick=function()
{
var file=flObj.files[0]; //因爲每次只上傳了一張圖片，所以獲取到flObj.files[0];
var fReader=new FileReader();
fReader.readAsDataURL(file)
fReader.οnlοad=function(e)
{
document.getElementById("img").src= this.result
}
}
效果
初始情況下
點擊選擇文件按鈕。再點擊上傳按鈕後
實例3： 拖拽任意類型文件，ajax上傳到服務器端
html代碼：
<form action="fileup.php" method="post" enctype="multipart/form-data">
<label for="file"> 文件名:</label>
<input type="file" name="file" id="file"></input><br/>
<input type="submit" name="submit" value="提交"></input>
</form>
js代碼
var box=document.getElementById("box");
box.οndragοver=function(e)
{
e.preventDefault();
this.style.background="#eee"
}
box.οndragleave=function(e)
{
e.preventDefault();
this.style.background="#fff"
}
box.οndrοp=function(e)
{
e.preventDefault();
//拖拽一個文件上傳
var file= e.dataTransfer.files[0]; //在拖拽時，通過event對象的dataTransfer對象下的files屬性來獲取當前對象
var newform=new FormData(); //定義一個FormData對象
newform.append("aa",file); //通過其apped方法把拖拽的對象發送至服務器端aa是一個名稱。用於服務器端讀取，file是獲取到的對象 （key，value）
var xml=new XMLHttpRequest();
xml.open("post","upload.php",false);
xml.send(newform);
}
php部分
if($_FILES["file"]["tmp_name"])
{
move_uploaded_file($_FILES["file"]["tmp_name"],$_FILES["file"]["name"]); //注意結尾的分號
}