因为上一次file里选择的文件路径值与本次选择的文件路径值是一样的,值没有改变所以导致file不会触发onchange事件。
解决方法:添加$("#doorPhoto")[0].value=null;
具体实例:
html:
<input type="file" accept="image/jpeg,image/jpg,image/png" id="doorPhoto" onchange='fileUpload("doorPhoto")' >
js:
上传的时候,框里只显示特定格式的文件,这个前端可以通过设置 accept 属性,但是屏蔽不了‘所有文件’这个选项,
在浏览选项里让它多文件选中,可以使用 swfupload.swf 上传组件,配置太多具体参考文档(https://www.runoob.com/w3cnote/swfupload-guide.html)
function fileUpload(data){
var value=data;
// 创建formdata对象
var formData = new FormData();
//保存图片信息
var pictureAttribute=$("#"+ data)[0].files[0];
//确定上传
if(pictureAttribute){
// 判断图片的大小小于10MB=10485760, 20MB=20971520
if(pictureAttribute.size>5242880){
alert("请选择小于5MB的图片!");
$("#"+value)[0].value=null;
return
}
if(pictureAttribute.type==="image/jpeg" || pictureAttribute.type==="image/jpg" || pictureAttribute.type==="image/png"){
//给formData对象添加file属性,值等于图片信息
formData.append("file", pictureAttribute);
formData.append("fileType",data);
$.ajax({
type : "post",
url : "#springUrl("/merchant/picFileUpload.htm")",//这里写你的url
data : formData,
async: false,
contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置
processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post)
dataType: "json",//这里是返回类型,一般是json,text等
clearForm: true,//提交后是否清空表单数据
success: function(data) { //提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
var dataJson=JSON.parse(data);
$("#"+value)[0].value=null;
if(dataJson.message===""){
alert("上传成功!");
}
},
error: function(data, status, e) { //提交失败自动执行的处理函数。
alert('上传失败!');
}
});
} else {
alert("只支持png,jpg,jpeg,gif,svg格式的图片");
}
}
}
网友评论