美文网首页一个字,杂
图片上传时input file change事件多次触发解决

图片上传时input file change事件多次触发解决

作者: 是曹不是蔡 | 来源:发表于2021-01-07 15:48 被阅读0次

file input出于安全角度,是不允许赋值的,即使是置空,虽然通过给outerHtml赋值可以清空,但貌似仅在ie下起使用。

因为缺少置空的方法,用户异步上传完毕文件后选择相同文件时,不会触发change,因为在这种情况下,我们没有办法使value(也就是文件路径)发生变化。

那难道就无解了么。。当然不是。。

我的解决方法是,每次选完文件,就重建此元素,这样值自然是空的,因为clone不带值,这样就是一个全新的file input,每一次选择,自然各种正常。使用unbind().以下是关键代码:

<script type="text/javascript">
   function upload(){
  $("#imgFile").click();
  $("#imgFile").unbind().change(function(){
  $("#fileForm").submit();
  })
   }
</script>
 <form id="fileForm" action="${basePath}/emp/imgupload" method="post" enctype="multipart/form-data">  

        <input name="imgFile" id="imgFile" type="file" accept="image/*" style="display: none"/>  
        <input type="button" value="图片上传" οnclick="upload()">  
  </form>  

相关文章

网友评论

    本文标题:图片上传时input file change事件多次触发解决

    本文链接:https://www.haomeiwen.com/subject/tzmzoktx.html