快速解决input[type=file]打开时慢、卡顿的问题

为何在input标签中使用类型为file并设置属性accept="image/"时，打开本地文件夹的速度会特别慢？

经过测试，我发现这一现象在特定的浏览器中存在。在Mac系统的safari、Firefox以及Chrome（不知为何opera总是闪退）都没有出现卡顿问题。在Windows系统中，只有Chrome出现了卡顿现象。

为了问题的根源，我决定先移除accept属性进行测试。果然，移除后就没有了卡顿的问题。进一步尝试将accept设置为"image/jpg"也没有出现卡顿情况。看来问题的关键就在于"image/"这个通配符。

原本设置accept属性的初衷是要筛选出所有图片。为了实现这一需求并提升用户体验，我们可以采取枚举的方式，指定可以接受的图片类型，如：gif、png、jpeg、jpg和bmp等。

修改后的代码如下：。

经过测试，这种方式确实能够有效解决问题。原来，问题的根源在于Chrome的SafeBrowsing功能。该功能在上传或保存时会检查文件。如果网络连接速度较快，则不会有任何问题。但如果连接较慢或不稳定，SafeBrowsing会让Chrome暂停一段时间，直到文件检查结束或超时。

使用特定的MIME类型（如accept="image/png, image/jpeg, image/gif"）可以绕过这个问题，因为这些MIME类型在SafeBrowsing的白名单内，无需进行检查。但如果使用通配符"image/"，则可能会触发较慢的检查结果。

以上就是长沙网络推广团队分享的快速解决input[type=file]打开时出现的慢、卡顿问题的全部内容。希望能给大家提供一个参考，也希望大家多多支持狼蚁SEO。