html5载入本地图片,HTML5之FileReader对象在浏览器中读取本地文件内容、预览图片...

在一些项目中，经常会遇到图片上传的情况，为了提高用户体验，一般会要求选择图片后 能预览一下图片。

以前的做法是 通过 ajax上传图片后，然后再显示出来，这样会产生大量的无用的图片文件，在HTML5的时代，有了FileReader对象，可以在浏览器选择本地的图片后，立马就可以在浏览器中显示选择的图片

具体也不对说了，手册百度一搜就是，就贴一下示例代码

Image preview example

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);

}

FileReader对象 配合 FormData对象 就可以完成一个体验很好的图片上传功能。不过这两个对象都是 HTML5新增的，兼容性不是很高，目前还比较时候用来做内部系统或者网站后台