HTML5的 File API允许浏览器访问本地文件系统，借助它我们可以实现以前无法实现的本地图片预览功能。
先介绍下该API实现了那些接口：
1.Blob接口，表示原始的二进制数据，通过它可以访问到文件的大小和字节数据
2.File接口，保存着文件的只读属性信息，如文件名，文件类型，文件数据访问的地址。
3.FileList，一个File文件组成的数组，表示用户通过<input type="file" multiple/>选择的文件（multiple表示支持文件多选）
4.FileReader接口，它提供了读取一个文件数据的若干方法和事件
5.FileError、FileException，错误模型
本代码由www.niyuewo.com同城交友网提供
详细接口参考 http://www.w3.org/TR/2009/WD-FileAPI-20091117/
我们知道通过data URI scheme，我们可以直接将图片数据传给img进行显示，而FileReader的readAsDataURL方法正好可以返回这种数据。
下面看代码：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 example: IMG Preview</title> </head> <body> <div><input id="viewFiles" type="file"/></div> <img id="viewImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" style="max-width:500px"/> <script type="text/javascript"> (function () { var viewFiles = document.getElementById("viewFiles"); var viewImg = document.getElementById("viewImg"); function viewFile (file) { //通过file.size可以取得图片大小 var reader = new FileReader(); reader.onload = function( evt ){ viewImg.src = evt.target.result; } reader.readAsDataURL(file); } viewFiles.addEventListener("change", function () { //通过 this.files 取到 FileList ，这里只有一个 viewFile(this.files[0]); }, false); })(); </script> </body> </html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。