解決input[type=file]開啟時慢、卡頓問題,inputtype

來源:互聯網
上載者:User

解決input[type=file]開啟時慢、卡頓問題,inputtype

為什麼在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/*"這樣的呢,就不行了,就有可能變得卡卡的。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.