圖片上傳時input file change事件多次觸發解決
阿新 • • 發佈：2019-02-06
file input出於安全形度，是不允許賦值的，即使是置空，雖然通過給outerHtml賦值可以清空，但貌似僅在ie下起使用。
因為缺少置空的方法，使用者非同步上傳完畢檔案後選擇相同檔案時，不會觸發change，因為在這種情況下，我們沒有辦法使value（也就是檔案路徑）發生變化。
那難道就無解了麼。。當然不是。。
我的解決方法是，每次選完檔案，就重建此元素，這樣值自然是空的，因為clone不帶值，這樣就是一個全新的file input，每一次選擇，自然各種正常。以下是關鍵程式碼：
<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="圖片上傳" onclick="upload()">
</form>