前几天遇到图片上传的问题,在自己的谷歌浏览上传是没有问题的,但是测试那边,当点击第二次图片的时候,怎么上传图片都是为空,不显示图片,这一个问题一直困扰我,后来问了老哥。
解决方法:现在chrome,FF,IE10+可以用FileReader来实现,我们只需要把点击的图片的时候,让图片清空,这样就可以解决问题。
代码显示:
/*图片上传*/
function imgPreview(fileDom) {
//判断是否支持FileReader
if(window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}
//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if(!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
var formData = new FormData();
formData.append('file', document.querySelector('input[type=file]').files[0]);
$.ajax({
url: 'url',
type: 'POST',
cache: false, //上传文件不需要缓存
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(data) {
imgurl = data.msg
}
})
//图片进行清空
$('#input_file').val('')
}
html模块:
<img id="preview" />
<input type="file" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)">