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

悠悠 2022-05-26 05:42 188阅读 0赞

在google了众多方法后，网上有这么几种方法：

1、替换掉原来的input框

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

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

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

问题解决！！

**\[javascript\]**  [view plain][]  [copy][view plain]

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)' οnclick='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.         \});

原文地址： [https://blog.csdn.net/wc0077/article/details/42065193][https_blog.csdn.net_wc0077_article_details_42065193]

[view plain]: https://blog.csdn.net/wc0077/article/details/42065193#
[https_blog.csdn.net_wc0077_article_details_42065193]: https://blog.csdn.net/wc0077/article/details/42065193