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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • [trans] Thresholding Algorithm[通俗易懂]

    [trans] Thresholding Algorithm[通俗易懂]十三种基于直方图的图像全局二值化算法原理、实现、代码及效果。     图像二值化的目的是最大限度的将图象中感兴趣的部分保留下来,在很多情况下,也是进行图像分析、特征提取与模式识别之前的必要的图像预处理过程。这个看似简单的问题,在过去的四十年里受到国内外学者的广泛关注,产生了数以百计的阈值选取方法,但如同其他图像分割算法一样,没有一个现有方法对各种各样的图像都能得到令人满意的结果。 …

    2022年5月16日
    50
  • Ubuntu 安装 Anaconda3 详细步骤

    Ubuntu 安装 Anaconda3 详细步骤主要介绍在Ubuntu14.04中安装Anaconda3的详细过程

    2022年5月12日
    40
  • UICollectionView的单选

    UICollectionView的单选//点击选定-(void)collectionView:(UICollectionView*)collectionViewdidSelectItemAtIndexPath:(NSIndexPath*)indexPath{    JFCollectionViewCell*cell=(JFCollectionViewCell*)[collection

    2022年5月29日
    40
  • psutil查看系统进程

    psutil查看系统进程>>>psutil.pids()#所有进程ID[3865,3864,3863,3856,3855,3853,3776,…,45,44,1,0]>>>p=psutil.Process(3776)#获取指定进程ID=3776,其实就是当前Python交互环境>>>p.name()#进程名称’p…

    2022年6月6日
    78
  • 市场上Web 应用防火墙哪家好?

    市场上Web 应用防火墙哪家好?伴随着移动互联网及互联网的发展,办公自动化也成为大势所趋。当企业通过网络办公获得无限便利后,也要时刻关注潜在的网络安全威胁。为了保护数据安全,更多企业都会配备Web应用防火墙设备。在市场上的Web应用防火墙产品应用中,被Gartner魔力象限评为Web应用防火墙领导者的F5公司的产品受到了广泛的关注与好评。 F5被Gartner魔力象限评为Web应用防火墙领导者F5推出的WEB应用防…

    2022年5月5日
    35
  • 126邮箱登录html,126邮箱登陆界面[通俗易懂]

    126邮箱登录html,126邮箱登陆界面[通俗易懂]大家常常会使用一些手机软件,怎么登录126邮箱,操作简单,容易理解,下面大家一起来学习一下吧。网易邮箱大师6.10.3苹果7IOS12安装并运行网易邮箱大师客户端。在登录栏中填写126邮箱账号。在密码栏填写邮箱密码。找到并点击添加选项。总结如下。网易126邮箱您的专业电子邮局,15年邮箱运营经验,系统快速稳定,垃圾邮件拦截率超过99%,邮箱容量自动翻倍,支持高达3G超大附件,提供免费网盘及手机号码…

    2025年5月23日
    2

发表回复

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

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