search
HomeWeb Front-endCSS TutorialSolution to the problem of slow opening and freezing of input[type=file]

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"/>

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
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
鸿蒙原生应用随机诗词鸿蒙原生应用随机诗词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.length()函数获取文件的大小使用java的File.length()函数获取文件的大小Jul 24, 2023 am 08:36 AM

使用Java的File.length()函数获取文件的大小文件大小是在处理文件操作时很常见的一个需求,Java提供了一个很方便的方法来获取文件的大小,即使用File类的length()方法。本文将介绍如何使用该方法来获取文件的大小,并给出相应的代码示例。首先,我们需要创建一个File对象来表示我们想要获取大小的文件。以下是创建File对象的方法:Filef

php blob怎么转filephp blob怎么转fileMar 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.renameTo()函数重命名文件使用java的File.renameTo()函数重命名文件Jul 25, 2023 pm 03:45 PM

使用Java的File.renameTo()函数重命名文件在Java编程中,我们经常需要对文件进行重命名的操作。Java提供了File类来处理文件操作,其中的renameTo()函数可以方便地重命名文件。本文将介绍如何使用Java的File.renameTo()函数来重命名文件,并提供相应的代码示例。File.renameTo()函数是File类的一个方法,

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

Go中Type关键字的用法有定义新的类型别名或者创建新的结构体类型。详细介绍:1、类型别名,使用“type”关键字可以为已有的类型创建别名,这种别名不会创建新的类型,只是为已有的类型提供一个新的名称,类型别名可以提高代码的可读性,使代码更加清晰;2、结构体类型,使用“type”关键字可以创建新的结构体类型,结构体是一种复合类型,可以用于定义包含多个字段的自定义类型等等。

使用java的File.getParentFile()函数获取文件的父目录使用java的File.getParentFile()函数获取文件的父目录Jul 27, 2023 am 11:45 AM

使用java的File.getParentFile()函数获取文件的父目录在Java编程中,我们经常需要操作文件和文件夹。当我们需要获取文件的父目录时,可以使用Java提供的File.getParentFile()函数来完成。本文将介绍如何使用这个函数并提供代码示例。Java中的File类是用于操作文件和文件夹的主要类。它提供了许多方法来获取和操作文件的属性

vue3怎么封装input组件和统一表单数据vue3怎么封装input组件和统一表单数据May 12, 2023 pm 03:58 PM

准备工作用vuecreateexample创建项目,参数大概如下:用原生input原生的input,主要是value和change,数据在change的时候需要同步。App.tsx如下:import{ref}from&#39;vue&#39;;exportdefault{setup(){//username就是数据constusername=ref(&#39;张三&#39;);//输入框变化的时候,同步数据constonInput=;return()=>({

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

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment