最近项目中客户提出需求,上传图片、或者修改图片时需要能够预览图片,防止图片上传错误。
由于功能原来已经做好,只有图片上传到服务器端了,然后统计img标签的url属性来获取已经上传了的图片进行查看,但没有做到实时预览的功能,
需要预览有两种解决办法:
一、在选择文件时,除非ajax请求直接上传到服务器,然后给img的url赋值
二、通过FileReader读取本地文件路径。
由于第一种方法需要和后台交换,没有保存又需要删除文件,所以不可行。
下面就介绍第二种实现方式。
FileReader作为文件API用于读取文件,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
脚本: function preview(file){
var prevDiv = document.getElementById('photoDivId');
if (file.files && file.files[0]){
if(window.FileReader) {
var fr = new FileReader();
} else {
alert("Not supported by your browser!");
}
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '';
}
reader.readAsDataURL(file.files[0]);
}else{
prevDiv.innerHTML = '
}
}
html代码
通过readAsDataURL方法去读取内容。
这样就可以实现图片上传实时预览功能了。