专栏首页SpringBootinput只允许上传图片类型文件

input只允许上传图片类型文件

版权声明:本文为博主原创文章,未经博主允许不得转载。

 accept="image/*"

解决变慢的问题

input[file]标签的accept属性可用于指定上传文件的 MIME类型 。

例如,想要实现默认上传图片文件的代码,代码可如下:

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

效果如下图所示,默认过滤掉所有非图片文件:

但是!

这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框。简直不能忍呀。

在IE和Firefox中使用 accept=”image/*” 属性则没有发现响应延迟的问题。

于是几经尝试后,发现是 accept=”image/*” 属性的问题,删掉它或者将 * 通配符修改为指定的MIME类型,就可以解决Webkit浏览器下的对话框显示滞慢的问题。

解决办法如下:

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

accept=”image/*”属性会对每一个文件都遍历一次所有的”image/*”文件类型,当文件较多时,文件的检验时间较长,这可能是Webkit的底层实现的bug。

另外,

accept=”audio/*”和 accept=”video/*” 属性 在 Webkit浏览器下也会有同样的响应延迟的问题。同理,通过将 * 通配符 修改成指定的MIME类型就可解决。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 程序员月薪12k被老板逼走,换到国企月薪20k,还5点下班!

    211,985学校本科毕业5年,UI,上一家创业公司12k,每天被老板嫌弃做得不好,加班不够多。

    一墨编程学习
  • 程序员年薪30万,嘲讽清华北大教授工资低,网友:你真的太年轻

    我国现在经济水平飞速发展,人们的生活条件也越来越好。不过这条件一好起来,就会出现一些意想不到的问题。

    一墨编程学习
  • 在微服务中启用分布式跟踪 | 微服务系列第十篇

    跟踪是一种用于监视软件的执行路径、以便进行调试或故障排除的专门的方法。您可能熟悉TRACE日志级别,其中包含有关每个方法调用的信息。跟踪微服务的目标类似于此级别...

    魏新宇
  • 学会提问 —— 批判性思维入门

    很早之前就要计划读这本书 ——《学会提问》。其中一位作者是尼尔·布朗(Neil Browne),博林格林州立大学(Bowling Green State Uni...

    Yano_nankai
  • 程序员给心意企业打电话被拒后失声痛哭:为什么不录用我

     每个人都有特别难过的时候,这个时候往往需要别人帮一把。无独有偶,一名网友在上海张江软件园某星巴克店内见到了心酸一幕:看到一个右手有缺陷的程序员,给他的意向企业...

    一墨编程学习
  • 紧急通知:无论你英语多差,只要想学,看了此文必有改变!

    夜深了,Benson关了灯正准备上床休息,手机屏幕亮了,他拿起手机一看,是露露发来的短信:

    用户1907613
  • 博士程序员感慨互联网行业太累,想进事业单位被网友批:浪费人才

    一名计算机博士毕业后在互联网行业从事程序员工作,但随着年龄的增长,感觉越发吃不消了:坐标北京,36岁的博士程序员,技术一般,在互联网公司工作的很吃力,且加班多,...

    一墨编程学习
  • docker下部署jenkins(一)

    本文带你在docker中安装jenkins服务,为入门级别的介绍,建议阅读时间10-15min.

    RobinsonZhang
  • 转录因子(TF)的作用方式

    转录因子主要有3种作用方式调控基因表达: TF既可以结合在DNA临近的增强子也可以结合在启动子玉玉。和TF有关的基因转录既可以上调也可以下调,TF通过以下几个...

    Y大宽
  • 领导周末喊程序员修错误,程序员霸气回应:在下卖艺不是卖身!

    现在不少员工都被公司要求各种加班,周一至周五晚上加,周末加,办公室加,回家加,有偿加,无偿加......确实让人看见就怕作为一名码农,程序员加班更是家常便饭。

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券