Rumah hujung hadapan web tutorial 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"/>
Salin selepas log masuk

再试试,果然妥妥的了!

原来是因为Chrome的SafeBrowsing功能会在上传或保存时检查文件,

如果网络连接到google的速度比较快呢,就没有什么问题。

但是如果连接比较慢,或者干脆跪掉了,那SafeBrowsing就会让Chrome挂起一段时间,直到文件检查结束或者超时

使用accept="image/png, image/jpeg, image/gif"就可以解决这个问题,因为这些MIME类型在SafeBrowsing的白名单里面,不需要检查。

但是如果用像是accept="image/*"这样的呢,就不行了,就有可能变得卡卡的。

Atas ialah kandungan terperinci input[type=file]打开时慢、卡顿问题的解决办法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Gunakan fungsi File.length() java untuk mendapatkan saiz fail Gunakan fungsi File.length() java untuk mendapatkan saiz fail Jul 24, 2023 am 08:36 AM

Gunakan fungsi File.length() Java untuk mendapatkan saiz fail Saiz fail adalah keperluan yang sangat biasa apabila berurusan dengan operasi fail Java menyediakan cara yang sangat mudah untuk mendapatkan saiz fail, iaitu, menggunakan panjang(. ) kaedah kelas Fail. Artikel ini akan memperkenalkan cara menggunakan kaedah ini untuk mendapatkan saiz fail dan memberikan contoh kod yang sepadan. Pertama, kita perlu mencipta objek Fail untuk mewakili fail yang kita ingin dapatkan saiznya. Berikut ialah cara membuat objek Fail: Filef

Bagaimana untuk menukar gumpalan php kepada fail Bagaimana untuk menukar gumpalan php kepada fail Mar 16, 2023 am 10:47 AM

Cara menukar gumpalan php kepada fail: 1. Buat fail sampel php 2. Melalui "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } ” kaedah boleh digunakan untuk menukar Blob kepada Fail.

Aplikasi asli Hongmeng puisi rawak Aplikasi asli Hongmeng puisi rawak Feb 19, 2024 pm 01:36 PM

Untuk mengetahui lebih lanjut tentang sumber terbuka, sila lawati: Komuniti Pembangun 51CTO Hongmeng https://ost.51cto.com Persekitaran berjalan DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Untuk membuat aplikasi, klik Fail- >newFile->CreateProgect. Pilih templat: [OpenHarmony] EmptyAbility: Isikan nama projek, shici, nama pakej aplikasi com.nut.shici dan lokasi storan aplikasi XXX (tiada bahasa Cina, aksara khas atau ruang). CompileSDK10, Model: Stage. Peranti

Namakan semula fail menggunakan fungsi File.renameTo() java Namakan semula fail menggunakan fungsi File.renameTo() java Jul 25, 2023 pm 03:45 PM

Gunakan fungsi File.renameTo() Java untuk menamakan semula fail Dalam pengaturcaraan Java, kita selalunya perlu menamakan semula fail. Java menyediakan kelas Fail untuk mengendalikan operasi fail, dan fungsi renameTo() boleh menamakan semula fail dengan mudah. Artikel ini akan memperkenalkan cara menggunakan fungsi File.renameTo() Java untuk menamakan semula fail dan menyediakan contoh kod yang sepadan. Fungsi File.renameTo() ialah kaedah kelas Fail.

Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail Jul 24, 2023 pm 01:40 PM

Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail Dalam pengaturcaraan Java, kita selalunya perlu mengendalikan fail dan folder. Kadangkala, kita perlu mendapatkan laluan induk bagi fail, iaitu laluan folder tempat fail itu berada. Kelas Fail Java menyediakan kaedah getParent() untuk mendapatkan laluan induk bagi fail atau folder. Kelas Fail ialah perwakilan abstrak Java bagi fail dan folder. Ia menyediakan satu siri kaedah untuk mengendalikan fail dan folder. Antaranya, dapatkan

Selesaikan ralat cakera keras mudah alih pemasangan Ubuntu: exfat jenis sistem fail tidak diketahui Selesaikan ralat cakera keras mudah alih pemasangan Ubuntu: exfat jenis sistem fail tidak diketahui Jan 05, 2024 pm 01:18 PM

Ralat berlaku apabila ubuntu memasang cakera keras mudah alih: mount: unknownfilesystemtype'exfat' Kaedah pemprosesan adalah seperti berikut: Ubuntu13.10 atau install exfat-fuse: sudoapt-getinstallexfat-fuseUbuntu13.04 atau di bawah sudoapt-add-repositoryppa:relan. /exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux memasang format exfat penyelesaian ralat cakera USB untuk memuatkan extfa dalam CentOS

Apakah kegunaan kata kunci Jenis dalam Go? Apakah kegunaan kata kunci Jenis dalam Go? Sep 06, 2023 am 09:58 AM

Penggunaan kata kunci Jenis dalam Go termasuk menentukan alias jenis baharu atau mencipta jenis struktur baharu. Pengenalan terperinci: 1. Jenis alias Gunakan kata kunci "jenis" untuk mencipta alias untuk jenis sedia ada, tetapi hanya memberikan nama baharu untuk jenis alias yang sedia ada kebolehbacaan kod menjadikan kod lebih jelas;

Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3 Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3 May 12, 2023 pm 03:58 PM

Penyediaan Gunakan vuecreateexample untuk mencipta projek Parameternya adalah seperti berikut: gunakan input asli terutamanya nilai dan perubahan. App.tsx adalah seperti berikut: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Apabila kotak input berubah, segerakkan data constonInput =;kembali( )=>({

See all articles