input[type=file]開啟時慢、卡頓問題的解決辦法

下面小編就為大家帶來一篇下面小編就為大家帶來一篇快速解決input[type=file]開啟時慢、卡頓的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

為什麼在input標籤類型為file上傳檔案時在標籤中設定屬性 accpet="image/*"，開啟本地檔案夾的速度特別慢？

經過測試發現，在mac裡面safari、Firefox、Chrome(opera不知道為啥老閃退)都沒有卡頓問題

在windows裡面，Firefox不卡頓，只有Chrome卡頓。

於是我決定先去掉accpet試試……

果然就沒有了卡頓的問題。

那麼本包在試試accpet="image/jpg"果然也不卡卡的了！！

看來問題的所在就是"image/*"

但是寫accpet的原意是要想要篩選出所有圖片_(:з」∠)_

那麼為了實現這個需求，同時提高使用者體驗，只能採取枚舉了

修改後的代碼

<input type ="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>

再試試，果然妥妥的了！

原來是因為Chrome的SafeBrowsing功能會在上傳或儲存時檢查檔案，

如果網路連接到google的速度比較快呢，就沒有什麼問題。

但是如果串連比較慢，或者乾脆跪掉了，那SafeBrowsing就會讓Chrome掛起一段時間，直到檔案檢查結束或者逾時

使用accept="image/png, image/jpeg, image/gif"就可以解決這個問題，因為這些MIME類型在SafeBrowsing的白名單裡面，不需要檢查。

但是如果用像是accept="image/*"這樣的呢，就不行了，就有可能變得卡卡的。