html input的file文件输入框onchange事件触发一次失效解决方法

原创

已于 2022-10-25 18:16:08 修改 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #jquery

于 2017-07-03 15:55:52 首次发布

本文介绍了一个文件上传功能中遇到的问题：提交一次后，file输入框的change事件无法再次触发。通过替换原有的input框并重新绑定onchange事件解决了该问题。

最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~

于是想办法解决它~

在网上找了一些资料，找到这几种方法：

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

我测试了之后发现可以用下面的方法解决这个问题：
第一步：上传完成后替换掉原来的input框
第二步：重新绑定onchange事件

问题解决！！

代码如下：

 1 <script>
 2         $(document).ready(function () {
 3             /* jquery handleError版本兼容 */
 4             jQuery.extend({
 5                 handleError: function (s, xhr, status, e) {
 6                     if (s.error) {
 7                         s.error.call(s.context || s, xhr, status, e);
 8                     }
 9                     if (s.global) {
10                         (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
11                     }
12                 },
13                 httpData: function (xhr, type, s) {
14                     var ct = xhr.getResponseHeader("content-type"),
15                         xml = type == "xml" || !type && ct && ct.indexOf("