ajaxFileUpload.js 插件上传图片遇到的坑
用 ajaxFileUpload 上传图触发一次change事件后,下次就不会再触发change事件 ,必须要刷新页面才可以再次上传
修改前的写法:
$('#uploadFile').change(function () { var f = document.getElementById('uploadFile').files[0] if (f.size > 2 * 1024 * 1024) { dialogMsg("文件过大, 建议文件小于2M", -1); return; } var src = window.URL.createObjectURL(f); document.getElementById('uploadPreview').src = src; //上传应用图标 $.ajaxFileUpload({ url: "/Member/UploadFile", secureuri: false, fileElementId: 'uploadFile', dataType: 'json', success: function (data) { $("#up_license").val(data.resultdata.path); dialogMsg(data.message, 1); } }); });
第一次可以上传,第二次重新上传没有触发,原因是由于ajaxFileUpload把原来的file元素替换成新的file元素,导致change事件失效
网上说将ajaxFileUpload源码为jQuery(oldElement).clone()
)改为$(oldElement).clone(true)
这样可以在复制元素的同时复制事件 然而处理后并没有起作用。
有人说重新绑定change事件,于是:
修改后的写法:
$('#uploadFile').change(function () {
UploadImg();
});
UploadImg = function () {
var f = document.getElementById('uploadFile').files[0]
if (f.size > 2 * 1024 * 1024) {
dialogMsg("文件过大, 建议文件小于2M", -1);
return;
}
var src = window.URL.createObjectURL(f);
document.getElementById('uploadPreview').src = src;
//上传应用图标
$.ajaxFileUpload({
url: "/Member/UploadFile",
secureuri: false,
fileElementId: 'uploadFile',
dataType: 'json',
success: function (data) {
$("#up_license").val(data.resultdata.path);
dialogMsg(data.message, 1);
$('#uploadFile').change(function () { //重新绑定事件
UploadImg();
});
}
});
}
在回调函数里 重新绑定change事件,这样就change事件失效的问题就解决了,亲测,有效!!