最近遇到一個比較奇葩的問題,某些ie瀏覽器在頁面中上傳文件時,無法上傳。查看控制台報錯: SCRIPT5: 拒絕訪問。 jquery-3.2.1.min.js, 行4 字符5725 。並且我的最新版IE11無此問題,開發者控制台調為IE9,IE10都正常,一時便摸不着頭腦,為什么會被限制呢?原因在哪?安全限制問題,難道事設置的問題?於是在網上進行檢索,各種說法都有,最准確的應該是“IE瀏覽器對非主動觸發input[type=file]文件上傳,進行安全限制,除非用戶主動點擊這個文件上傳的input按鈕。”,眾所周知,input[type=file]這個文件上傳按鈕確實太low了,關鍵是不能自定義它的樣式,這就很尷尬,絕大部分開發者都是采取隱藏此丑陋的按鈕,使用另外一個比較高大上的按鈕,然后間接觸發隱藏的原生按鈕。
但是如果你是隨便用個input或者button來間接觸發文件上傳,IE由於安全限制,就會報以上拒絕訪問錯誤。為了,解決這個問題,必須主動觸發,采用原生的上傳按鈕,肯定是可以,但是是不可能用它的,長得那么丑,這輩子都不可能用了(手動滑稽),所以,要主動觸發就要借助label的for屬性,綁定到對應的input上即可。此時,只需要把label的for屬性,指向文件上傳input的id,然后再定義好label的樣式,即可。示例代碼:
<form id="fileUploadF" method="post" target="formUpFile" class="form form-group text-right" enctype="multipart/form-data"> <input type="file" id="fileUpIpt" class="fileUpIpt form-inline" accept="*/*" name="files" multiple="multiple" > <input type="hidden" name="qblcId" value="${qblcId}"> <label for="fileUpIpt" class="btn btn-sm btn-default upload-btn"> 上傳附件 </label> </form>
目測這是最完美的解決方案了。