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

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类型就可解决。

图片尽量不要加上svg

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112044.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C++ 中的容器类详解

    C++ 中的容器类详解C++中的容器类包括“顺序存储结构”和“关联存储结构”,前者包括vector,list,deque等;后者包括set,map,multiset,multimap等。若需要存储的元素数在编译器间就可以确定,可以使用数组来存储,否则,就需要用到容器类了。1、vector    连续存储结构,每个元素在内存上是连续的;    支持高效的随机访问和在尾端插入/删除操作,但其他位置的插入/删除操…

    2022年9月13日
    0
  • oracle中的sequence

    oracle中的sequence1、什么是sequence?在oracle中sequence就是序号,每次取的时候它会自动增加。sequence与表没有关系。2、sequence的作用?当需要建立一个自增字段时,需要用到sequen

    2022年7月2日
    21
  • 一个让WordPress媒体库支持外链图片的插件

    一个让WordPress媒体库支持外链图片的插件最近有一个月左右没更新了,因为这个月的业余时间都在忙于一个WordPress插件:ExternalMediawithoutImport。其实只是很小很简单的一个插件,代码不过短短几百行。不过这东西一旦被当成产品认真做起来,依然让我感到——每天在上班时间以外,应对完工作上的需求和bug之后,接着还要在业余时间认真做好另一个产品是多么劳心劳力。这是我正式发布并打算认真维护的第一个个人

    2022年6月18日
    20
  • 如何黑钓鱼网站_初学钓鱼视频教程全集

    如何黑钓鱼网站_初学钓鱼视频教程全集一、被盗号找上门今天一打开QQ邮箱,看到个群邮件这货以发聚会照片为名义给出了一个网址Defaulthttp://202.194.131.20/xcb/xcb/link.php?id=73&url=http://yyhhj.emy.in/cc/?9330461http://202.194.131.20/xcb/xcb/link.php?id=73&url=http://yyhhj.e…

    2022年8月24日
    4
  • webservice技术介绍

    一、WebService到底是什么?   一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术。   所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用其他编程语言编写,反之亦然!跨操作系统平台则是指服务端程序和客户端程序可以在不同的操作系统上运行。    所谓远程调用,就是一台计算机a上的一个程序可以调用到另外一台

    2022年4月5日
    109
  • filter pitcher是什么意思_EncodingFilter

    filter pitcher是什么意思_EncodingFilterorg.apache.struts2.dispatcher.FilterDispatcher是Struts2的主要的Filter,负责四个方面的功能:       (1)执行Actions       (2)清除ActionContext       (3)维护静态内容       (4)清除request生命周期内的XWork的interceptors   另注:该

    2022年8月16日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号