图片上传时input file change事件多次触发解决
2021-01-07 本文已影响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>