在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片。
以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的时代,有了FileReader对象,可以在浏览器选择本地的图片后,立马就可以在浏览器中显示选择的图片
具体也不对说了,手册百度一搜就是,就贴一下示例代码
<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); } </script> </head> <body onload="loadImageFile();"> <form name="uploadForm"> <table> <tbody> <tr> <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" /></td> <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> </tr> </tbody> </table> <p><input type="submit" value="Send" /></p> </form> </body> </html>
FileReader对象 配合 FormData对象 就可以完成一个体验很好的图片上传功能。不过这两个对象都是 HTML5新增的,兼容性不是很高,目前还比较时候用来做内部系统或者网站后台