html5 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 拖拽图片预览
要实现的过程如下
拖拽任意一文件，本例以图片为例。当拖拽图片到页面左侧带+号的盒子时，图片会出现在右侧的盒子里。
------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
html：
<div id="box">+</div>
<div id="box2"></div>
js:
var box=document.getElementById("box");
var box2=document.getElementById("box2");
box.ondragover=function(e)
{ e=e||window.event
e.preventDefault();
this.style.background="#ddd"
}
box.ondrop=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.onload=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.onclick=function()
{
var file=flObj.files[0]; //因为每次只上传了一张图片，所以获取到flObj.files[0];
var fReader=new FileReader();
fReader.readAsDataURL(file)
fReader.onload=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.ondragover=function(e)
{
e.preventDefault();
this.style.background="#eee"
}
box.ondragleave=function(e)
{
e.preventDefault();
this.style.background="#fff"
}
box.ondrop=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"]); //注意结尾的分号
}