首頁 web前端 css教學 input[type=file]開啟時慢、卡頓問題的解決方法

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

Aug 12, 2017 pm 03:06 PM
file input type

下面小編就為大家帶來一篇下面小編就為大家帶來一篇快速解決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/*"這樣的呢,就不行了,就有可能變成卡卡的。

以上是input[type=file]開啟時慢、卡頓問題的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
php blob怎麼轉file php blob怎麼轉file Mar 16, 2023 am 10:47 AM

php blob轉file的方法:1.建立一個php範例檔;2、透過「function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })} 」方法實作Blob轉File即可。

使用java的File.length()函數取得檔案的大小 使用java的File.length()函數取得檔案的大小 Jul 24, 2023 am 08:36 AM

使用Java的File.length()函數取得檔案的大小檔案大小是在處理檔案作業時很常見的一個需求,Java提供了一個很方便的方法來取得檔案的大小,即使用File類別的length()方法。本文將介紹如何使用此方法來取得檔案的大小,並給出對應的程式碼範例。首先,我們需要建立一個File物件來表示我們想要取得大小的檔案。以下是建立File物件的方法:Filef

鴻蒙原生應用隨機詩詞 鴻蒙原生應用隨機詩詞 Feb 19, 2024 pm 01:36 PM

想了解更多關於開源的內容,請造訪:51CTO鴻蒙開發者社群https://ost.51cto.com運行環境DAYU200:4.0.10.16SDK:4.0.10.15IDE:4.0.600一、建立應用程式點擊File- >newFile->CreateProgect。選擇模版:【OpenHarmony】EmptyAbility:填寫項目名,shici,應用包名com.nut.shici,應用儲存位置XXX(不要有中文,特殊字符,空格)。 CompileSDK10,Model:Stage。 Device

使用java的File.renameTo()函數重命名文件 使用java的File.renameTo()函數重命名文件 Jul 25, 2023 pm 03:45 PM

使用Java的File.renameTo()函數重命名檔案在Java程式設計中,我們經常需要對檔案進行重命名的操作。 Java提供了File類別來處理檔案操作,其中的renameTo()函數可以方便地重新命名檔案。本文將介紹如何使用Java的File.renameTo()函數來重新命名文件,並提供對應的程式碼範例。 File.renameTo()函數是File類別的一個方法,

使用java的File.getParent()函數取得檔案的父路徑 使用java的File.getParent()函數取得檔案的父路徑 Jul 24, 2023 pm 01:40 PM

使用java的File.getParent()函數取得檔案的父路徑在Java程式設計中,我們經常需要操作檔案和資料夾。有時候,我們需要取得一個檔案的父路徑,也就是該檔案所在資料夾的路徑。 Java的File類別提供了getParent()方法用來取得檔案或資料夾的父路徑。 File類別是Java對檔案和資料夾的抽象表示,它提供了一系列操作檔案和資料夾的方法。其中,get

Go中Type關鍵字有哪些用法 Go中Type關鍵字有哪些用法 Sep 06, 2023 am 09:58 AM

Go中Type關鍵字的用法有定義新的型別別名或建立新的結構體類型。詳細介紹:1、類型別名,使用「type」關鍵字可以為現有的類型建立別名,這種別名不會建立新的類型,只是為現有的類型提供一個新的名稱,類型別名可以提高程式碼的可讀性,使程式碼更加清晰;2、結構體類型,使用「type」關鍵字可以建立新的結構體類型,結構體是一種複合類型,可用於定義包含多個欄位的自訂類型等等。

解決Ubuntu掛載行動硬碟錯誤:未知的檔案系統類型exfat 解決Ubuntu掛載行動硬碟錯誤:未知的檔案系統類型exfat Jan 05, 2024 pm 01:18 PM

ubuntu掛載行動硬碟出現錯誤:mount:unknownfilesystemtype'exfat'處理方法如下:Ubuntu13.10或安裝exfat-fuse:sudoapt-getinstallexfat-fuseUbuntu13.04或以下sudoapt-add-repositoryppa:relan/ exfatCentOSLinux掛載exfat格式u碟錯誤的解決方法CentOS中載入extfa

laravel input隱藏域怎麼實現 laravel input隱藏域怎麼實現 Dec 12, 2022 am 10:07 AM

laravel input隱藏域的實作方法:1、找到並開啟Blade模板檔案;2、在Blade模板中使用method_field方法來建立隱藏域,其建立語法為「{{ method_field('DELETE') }}」。

See all articles