![FileReader 方法 实现预览图片]( "FileReader 方法 实现预览图片")
FileReader 方法
| 方法名 |
参数 |
描述 |
| abort |
none |
中断读取 |
| readAsBinaryString（readAsArrayBuffer） |
file（blob） |
将文件读取为二进制码 |
| readAsDataURL |
file（blob） |
将文件读取为 DataURL |
| readAsText |
file, （blob） |
将文件读取为文本 |
FileReader 事件
| 事件 |
描述 |
| onabort |
中断时触发 |
| onerror |
出错时触发 |
| onload |
文件读取成功完成时触发 |
| onloadend |
读取完成触发，无论成功或失败 |
| onloadstart |
读取开始时触发 |
| onprogress |
读取中 |
案例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
function readAsDataURL()
{
if(typeof FileReader=='undifined') //判断浏览器是否支持filereader
{
result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
return false;
}
var file=document.getElementById("imagefile").files[0];
if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件
{
alert("请确保文件为图像文件");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e)
{
var img_result=document.getElementById("result");
img.result.innerHTML='<img src="'+this.result+'" alt=""/>'
}
}
</script>
</head>
<body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="imagefile" />
<input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
<!-- 这里用来显示图片结果-->
</div>
</body>
</html>
相关文章：MDN FileReader
HTML5 退拽文件读取
HTML5拖拽——将本地文件拖拽到网页中显示
