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" οnchange="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.οnlοad=function(e){
alert(e.target.result);
strHtml += "<span>";
strHtml += "<img src='"+e.target.result+"' alt=''/>";
strHtml += "</span>";
$$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
};
}
}