HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果

FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去。

通过FileReader接口中的readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。

注意：当访问不同的文件时，必须重新调用FileReader的构造函数，也就是重新new一个FileReader对象，因为每调用一次，FileReader对象都将返回一个新的FileReader实例，只有这样，才能实现访问不同文件的数据

html代码：

<fieldset>

<legend>使用readAsDataUrl()方法预览图片</legend>

<input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" />

<ul id="prevUpload"></ul>

</fieldset>

js代码：

function $$(id){

retturn document.getElementById(id);

}

function filePrevImg(files){

//检测浏览器是否支持FileReader对象

if(typeof FileReader == "undefined"){

alert("您的浏览器不支持FileReader对象！");

}

var strHtml = "";

for(var intI=0;intI<files.length;intI++){

var tmpFile = files[intI];

var reader = new FileReader();//每循环一次都要重新new一个FileReader实例

reader.readAsDataURL(tmpFile);

reader.onload=function(e){

alert(e.target.result);

strHtml += "<span>";

strHtml += "<img src='"+e.target.result+"' alt=''/>";

strHtml += "</span>";

$$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";

};

}

}