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

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

change事件上传一次后失效

相同文件只能选择一次（有上传相同文件的需求）

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

//上传成功后大致操作
$("#file").replaceWith("<input type='file' name='file' id='file'/>");
$('#fileParent').on('change', function () {});

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

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

具体实现过程：

<!--file元素html声明：--> 
<div style="display: none;" id="fileParent">
       <input type="file" name="file" id="file">
 </div>

 

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

————————————————
版权声明：本文为优快云博主「LYM0721」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/LYM0721/article/details/81559824