Quickly solve the problem of slow and stuck opening of input[type=file]

Why is it that when the input tag type is file and the attribute accpet="image/*" is set in the tag, the speed of opening the local folder is particularly slow?

After testing, I found that there is no lag problem in Safari, Firefox, and Chrome (Opera always crashes for some reason) on Mac.

In Windows, Firefox does not lag, only Chrome lags.

So I decided to remove accpet first...

Sure enough, there was no lag problem.

Then this package tried accpet="image/jpg" and it really didn't get stuck! !

It seems that the problem is "image/*"

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

In order to achieve this requirement and improve user experience, we can only use enumeration.

Modified code

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

Try it again, and it works fine!

It turns out that this is because Chrome's SafeBrowsing feature checks files when uploading or saving.

If the network connection to Google is fast, there will be no problem.

But if the connection is slow or down, SafeBrowsing will hang Chrome for a while until the file check is completed or times out.

Using accept="image/png, image/jpeg, image/gif" can solve this problem, because these MIME types are in the SafeBrowsing whitelist and do not need to be checked.

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

The above article on how to quickly solve the problem of slow and stuck opening of input[type=file] is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.