Home Web Front-end CSS Tutorial Solution to the problem of slow opening and freezing of input[type=file]

Solution to the problem of slow opening and freezing of input[type=file]

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

The following editor will bring you an article. The following editor will bring you an article to quickly solve the problem of slow and stuck input[type=file] when opening. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Why do we set attributes in the tag when the input tag type is file to upload a fileaccpet="image/*", open Are local folders particularly slow?

After testing, it was found that there is no lag problem in Safari, Firefox, and Chrome (opera doesn’t know why it keeps crashing) on ​​mac

In windows, Firefox does not lag, only Chrome Stuck and stopped.

So I decided to try removing accpet first...

Sure enough, there was no lag problem.

Then I’m trying this package outaccpet="image/jpg" Sure enough, it’s not stuck anymore! !

It seems that the problem is "image/*"

But the original intention of writing accpet is to filter out all pictures_( :з ∠)_

So in order to realize this requirement and improve the user experience at the same time, we can only enumerate the

modified code


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

Try it again, it’s really good!

It turns out that it’s because Chrome’s SafeBrowsing function checks files when uploading or saving.

What if the network connection to Google is faster? , there is no problem.

But if the connection is slow, or simply down, SafeBrowsing will let Chrome hang for a period of time until the file check ends or times out

Use accept= "image/png, image/jpeg, image/gif" can solve this problem, because these MIME types are in the whitelist of SafeBrowsing and are not needed examine.

But if you use something like accept="image/*", it won't work, and it may become stuck.

The above is the detailed content of Solution to the problem of slow opening and freezing of input[type=file]. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Use java's File.length() function to get the size of the file Use java's File.length() function to get the size of the file Jul 24, 2023 am 08:36 AM

Use Java's File.length() function to get the size of a file. File size is a very common requirement when dealing with file operations. Java provides a very convenient way to get the size of a file, that is, using the length() method of the File class. . This article will introduce how to use this method to get the size of a file and give corresponding code examples. First, we need to create a File object to represent the file we want to get the size of. Here is how to create a File object: Filef

How to convert php blob to file How to convert php blob to file Mar 16, 2023 am 10:47 AM

How to convert php blob to file: 1. Create a php sample file; 2. Through "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })} ” method can be used to convert Blob to File.

Hongmeng native application random poetry Hongmeng native application random poetry Feb 19, 2024 pm 01:36 PM

To learn more about open source, please visit: 51CTO Hongmeng Developer Community https://ost.51cto.com Running environment DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. To create an application, click File- >newFile->CreateProgect. Select template: [OpenHarmony] EmptyAbility: Fill in the project name, shici, application package name com.nut.shici, and application storage location XXX (no Chinese, special characters, or spaces). CompileSDK10, Model: Stage. Device

Rename files using java's File.renameTo() function Rename files using java's File.renameTo() function Jul 25, 2023 pm 03:45 PM

Use Java's File.renameTo() function to rename files. In Java programming, we often need to rename files. Java provides the File class to handle file operations, and its renameTo() function can easily rename files. This article will introduce how to use Java's File.renameTo() function to rename files and provide corresponding code examples. The File.renameTo() function is a method of the File class.

Solve Ubuntu mounting mobile hard disk error: unknown file system type exfat Solve Ubuntu mounting mobile hard disk error: unknown file system type exfat Jan 05, 2024 pm 01:18 PM

An error occurs when ubuntu mounts a mobile hard disk: mount: unknownfilesystemtype'exfat'. The processing method is as follows: Ubuntu13.10 or install exfat-fuse: sudoapt-getinstallexfat-fuseUbuntu13.04 or below sudoapt-add-repositoryppa:relan/exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux mount exfat format USB disk error solution to load extfa in CentOS

Use java's File.getParent() function to get the parent path of the file Use java's File.getParent() function to get the parent path of the file Jul 24, 2023 pm 01:40 PM

Use java's File.getParent() function to get the parent path of a file. In Java programming, we often need to operate files and folders. Sometimes, we need to get the parent path of a file, which is the path of the folder where the file is located. Java's File class provides the getParent() method to obtain the parent path of a file or folder. The File class is Java's abstract representation of files and folders. It provides a series of methods for operating files and folders. Among them, get

What are the uses of the Type keyword in Go? What are the uses of the Type keyword in Go? Sep 06, 2023 am 09:58 AM

The usage of the Type keyword in Go includes defining new type aliases or creating new structure types. Detailed introduction: 1. Type alias. Use the "type" keyword to create an alias for an existing type. This alias does not create a new type, but only provides a new name for the existing type. Type aliases can improve code. The readability of the code makes the code clearer; 2. Structure type. Use the "type" keyword to create a new structure type. The structure is a composite type that can be used to define custom types containing multiple fields. etc.

How to implement laravel input hidden field How to implement laravel input hidden field Dec 12, 2022 am 10:07 AM

How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".

See all articles