资讯专栏INFORMATION COLUMN

input[type='file']在html5中打开文件选择框缓慢问题

BenCHou / 1489人阅读

摘要:最近在项目中引用了一个新标准上传附件的插件,使用过程中发现了一个很有意思也很头疼的问题,第一次点击时瞬间就可以打开文件选择框,之后再点击则需要等待恐怖的以上备注使用的是浏览器版本这是核心部分代码,经过二次封装的。

最近在项目中引用了一个html5新标准上传附件的插件,使用过程中发现了一个很有意思也很头疼的问题,第一次点击时瞬间就可以打开文件选择框,之后再点击则需要等待恐怖的8s以上(备注:使用的是chrome浏览器53.X版本)


这是核心部分代码,经过二次封装的。
后来google一下介绍说是chrome版本52、53的bug,不用说直接升级到54,遗憾的是问题并没有解决!
最后无奈的看了一下插件的源码,发现的问题的根源


原来是设置的mime_types类型转换成input[type=file]标签的accept属性值,打开文件选择框时会根据accept值过滤目录中的文件,仅显示允许的文件类型


基于以上原因,将mine_types设置去掉,类型是否合法的判断交给点击上传的时候再做,OK,问题解决了!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80753.html

相关文章

  • H5 input[type='date'] 优化 pc端和移动端的使用

    标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展: 获取当前日期,并显示在input[type=date]上 html: js: $(function(...

    VincentFF 评论0 收藏0
  • H5 input[type='date'] 优化 pc端和移动端的使用

    标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展: 获取当前日期,并显示在input[type=date]上 html: js: $(function(...

    wemallshop 评论0 收藏0
  • H5 input[type='date'] 优化 pc端和移动端的使用

    标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展: 获取当前日期,并显示在input[type=date]上 html: js: $(function(...

    haoguo 评论0 收藏0

发表评论

0条评论

BenCHou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<