记input file元素change事件上传一次失效问题

使用input file元素时上传碰到两个问题:

  1. change事件上传一次后失效

  2. 相同文件只能选择一次(有上传相同文件的需求)

问题1:网上一搜很多碰到同样问题的小伙伴,解决方案大致思路为上传完成后替换原file元素的内容,然后重新绑定change事件,大致实现如下

//上传成功后大致操作
$("#file").replaceWith("");
$('#fileParent').on('change', function () {});

这样做是能够解决问题,但是这样做除了麻烦以外,个人感觉语义上也不太好理解,每上传一次还要重新生成一次input file元素,重新绑定change事件。后来发现了一个感觉更好的解决方案,可以从file元素的父类监听其change事件(此写法不兼容IE8,重新替换file元素可支持IE8),具体参考file的onChange事件的添加,文末也有我的实现代码。

问题2:这个问题很好理解,按照语义change事件自然是在file元素中的内容发生改变时触发,选择同一文件没有改变其内容导致无法触发change事件,所以解决方案就是在上传成功后把file元素的内容置空即可。

具体实现过程:


 <div style="display: none;" id="fileParent">
       <input type="file" name="file" id="file">
 div>

 
  $('#fileParent').on('change','#file', function () {
      //上传操作
      //上传成功后清空file元素中的内容,否则选择同一文件无法触发change事件
      $("#file").val("");
  });

参考文献:jiang_mingyi的博客

你可能感兴趣的:(前端)