A new solution for the onchange event of the input file box to trigger a failure

After googled many methods, there are several methods on the Internet:

1. Replace the original input box

2. Remove the original input box, and then add a new same input box

But don't know why very unfortunately, I can't get it to work. .

Later, an inspiration suddenly flashed in my head. After I triggered an onchange event, he did not respond. Is the onchange event not bound? Later, I found that my speculation was correct, and then I bound an onchange to him again. Event, test passed! ! !

problem solved! !

[javascript]  view plain copy  

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( "Upload file successfully!" );  
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( "File upload failed: "  + 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( "File upload failed!" );  
34.                 }  
35.             });  
36.             returnfalse;   
37.         });  

Original address: https://blog.csdn.net/wc0077/article/details/42065193