关于input的file框onchange事件触发一次失效的新的解决方法

时间:2021-11-24 12:46:52

在google了众多方法后,网上有这么几种方法:

1、替换掉原来的input框

2、remove原来的input框,然后在添加进新的一样的input框

但是不知道为什么非常不幸的是,怎么弄我都弄不出。。

后来我脑袋突然闪过一个灵感,我在触发了一次onchange事件后,他没反应,是不是onchange事件没有绑定,后来发现我的推测是正确的,然后我就重新给他绑定了一个onchange事件,测试通过!!!

问题解决!!

 $("#targetFile").change(function(){
var filename = $(this).val();
$("#originalTargetFileName").val(filename);
}); $("#targetUpload").submit(function(){
$.ajaxFileUpload({
type: "post",
url: "${pageContext.request.contextPath}/upload.do",
secureuri:false,
fileElementId:"targetFile",
dataType: "json",
success: function(result,status) {
if (result.success == "1") {
alert("上传文件成功!");
var filename=getFileNameFromFilePath(result.fileRelativePath);
$("#target_upload_info").html("<div>"+"文件:"+filename+" <a href='javascript:void(0)' onclick='deletefile("+"\""+result.fileRelativePath+"\",\"target\")'>删除</a>"+"<br/></div>");
$("#target_upload_info").css("visibility", "visible");
$("#targetFileRelativePath").val(result.fileRelativePath);
} else {
$("#target_upload_info").html("文件上传失败: " + result.msg);
$("#target_upload_info").css({"visibility":"visible", "color":"red"});
}
},
complete: function(xmlHttpRequest) {
$("#targetFile").replaceWith('<input type="file" id="targetFile" name="upFile" style="display:none;"/>');
$("#targetFile").on("change", function(){
var filename = $(this).val();
$("#originalTargetFileName").val(filename);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
});