问题:
file 控件选择一个文件后,重新选择相同文件时不会触发 change 事件
解决:
没有触发说明内容没有改变,考虑是 HTML 在 file 控件中做了缓存,因此我们把控件内容删除,再重新上传时就是已改变的
使用 在 change 事件中添加下面的代码,清除 file 控件内容
// 原生 js 处理
document.getElementById("file_upload").value=""
// jQuery 处理
$("#file_upload").val("")
这样在上传相同文件时,仍然会触发 change 事件
完整例子:
选择文件后自动上传
<input type="file" id="file_upload" name="file_upload">
$("#file_upload").change(function () {
var obj = this;
var files = obj.files;
var formData = new FormData();
for (var i=0; i < files.length; i++){
formData.append("data_file", files[i]);
}
$.ajax({
url: "/upload/"
, type: "post"
, data: formData
, headers: {
"X-CSRFToken": $.cookie("csrftoken")
}
, processData: false // 不处理数据
, contentType: false // 不设置内容类型
, success: function (data) {
if (data.code===200){
alert("上传成功");
}else{
alert("上传失败");
}
// $(obj).val("")
obj.value = "" // 清空 file 控件内容,防止相同文件名不触发上传事件
}
, error: function () {
obj.value = "" // 清空 file 控件内容,防止相同文件名不触发上传事件
alert("上传出错");
}
})
});