HTML5 input file 打开很慢的问题

input[file] bug

开发中遇到了这样一个问题
我们在代码中使用了HTML5的input[file]标签去上传图片

<input type="file" name="file" class="element" accept="image/*">

同时,在上面代码中,使用了 accept=”image/*” 去过滤所有非图片的文件。

但是,在最新版本的chrome(52.0.2743.116 (64-bit))中,出现了一个很奇特的问题。

点击input之后,会有一定概率出现文件选择框弹出非常慢的问题,正常情况下,不到1S就能弹出文件选择框。但是慢的时候,可能达到7 ~ 10秒。

对属性进行逐一排查后,发现是accept=”image/*”的问题。

将accept=”image/*”改为指定的图片格式就不会出现上述的概率性问题,所以我将上传图片的过滤格式指定为了常用的几种格式

<input type="file" name="file" class="element" accept="image/gif,image/jpg,image/jpeg,image/png">

当然,如果希望过滤所有的非图片格式,那么这个问题还是会存在。原因初步猜想是当设置accept=”image/*”时,浏览器会在弹出框中处理所有的非图片元素,包含所有的图片格式,如果文件较多会增加处理时间,而这个时候可能在这个版本的chrome中有bug(也许是底层没实现好),导致概率性时间增长。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,528评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,442评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,216评论 4 61
  • 原文链接:http://fighting300.com.... OLLVM简介 OLLVM(Obfuscator-...
    fighting300阅读 21,086评论 65 35
  • 文图/月中山 宝贝打了预防针,这两天又开始发烧,感觉世界要崩溃了。 昨晚上一晚物理降温,没有睡觉,今天白天家里又一...
    月中山阅读 1,865评论 3 3