关于input的file框onchange事件触发一次失效的新的解决方法
在google了众多方法后,网上有这么几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
但是不知道为什么非常不幸的是,怎么弄我都弄不出。。
后来我脑袋突然闪过一个灵感,我在触发了一次onchange事件后,他没反应,是不是onchange事件没有绑定,后来发现我的推测是正确的,然后我就重新给他绑定了一个onchange事件,测试通过!!!
问题解决!!
1 $("#targetFile").change(function(){ 2 var filename = $(this).val(); 3 $("#originalTargetFileName").val(filename); 4 }); 5 6 $("#targetUpload").submit(function(){ 7 $.ajaxFileUpload({ 8 type: "post", 9 url: "${pageContext.request.contextPath}/upload.do", 10 secureuri:false, 11 fileElementId:"targetFile", 12 dataType: "json", 13 success: function(result,status) { 14 if (result.success == "1") { 15 alert("上传文件成功!"); 16 var filename=getFileNameFromFilePath(result.fileRelativePath); 17 $("#target_upload_info").html("<div>"+"文件:"+filename+" <a href='javascript:void(0)' onclick='deletefile("+"\""+result.fileRelativePath+"\",\"target\")'>删除</a>"+"<br/></div>"); 18 $("#target_upload_info").css("visibility", "visible"); 19 $("#targetFileRelativePath").val(result.fileRelativePath); 20 } else { 21 $("#target_upload_info").html("文件上传失败: " + result.msg); 22 $("#target_upload_info").css({"visibility":"visible", "color":"red"}); 23 } 24 }, 25 complete: function(xmlHttpRequest) { 26 $("#targetFile").replaceWith('<input type="file" id="targetFile" name="upFile" style="display:none;"/>'); 27 $("#targetFile").on("change", function(){ 28 var filename = $(this).val(); 29 $("#originalTargetFileName").val(filename); 30 }); 31 }, 32 error: function(data, status, e) { 33 alert("文件上传失败!"); 34 } 35 }); 36 return false; 37 });