input只允許上傳圖片類型文件


轉自https://blog.csdn.net/u013766398/article/details/53104305

accept="image/*" 

解決變慢的問題

input[file]標簽的accept屬性可用於指定上傳文件的 MIME類型 。

例如,想要實現默認上傳圖片文件的代碼,代碼可如下:

1 <input type="file" name="file" class="element" accept="image/*">

實現效果默認過濾掉所有非圖片文件:

但是!
這段代碼在Chrome和Safari等Webkit瀏覽器下卻出現了響應滯慢的問題,可能要等 6~10s 才能彈出文件選擇對話框。簡直不能忍呀。

在IE和Firefox中使用 accept=”image/*” 屬性則沒有發現響應延遲的問題。

於是幾經嘗試后,發現是 accept=”image/*” 屬性的問題,刪掉它或者將 * 通配符修改為指定的MIME類型,就可以解決Webkit瀏覽器下的對話框顯示滯慢的問題。

解決辦法如下:

1 <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

accept=”image/*”屬性會對每一個文件都遍歷一次所有的”image/*”文件類型,當文件較多時,文件的檢驗時間較長,這可能是Webkit的底層實現的bug。

另外,

accept=”audio/*”和 accept=”video/*” 屬性 在 Webkit瀏覽器下也會有同樣的響應延遲的問題。同理,通過將 * 通配符 修改成指定的MIME類型就可解決。

圖片盡量不要加上svg


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM