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
