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


相关推荐

  • 微信支付申请退款步骤_微信怎么没有退款提示

    微信支付申请退款步骤_微信怎么没有退款提示本文是【浅析微信支付】系列文章的第八篇,主要讲解商户如何处理微信申请退款、退款回调、查询退款接口,其中有一些坑的地方,会着重强调。浅析微信支付系列已经更新七篇了哟~,没有看过的朋友们可以看一下哦。

    2022年8月1日
    15
  • Tomcat部署war包启动并成功访问

    Tomcat部署war包启动并成功访问生成war包war包生成路径移动war包将war包复制到Tomcat安装路径webapps下启动Tomcat服务器浏览器访问项目项目不能正常访问如果项目不能正常访问,删除这两个文件下的所有文件。有两种人徒劳无功:一种人得到财富不肯享用,一种人得到学问不肯实践。…

    2022年5月8日
    230
  • Linux安装PS_linux 安装命令

    Linux安装PS_linux 安装命令导读pstack命令可显示每个进程的栈跟踪。pstack命令必须由相应进程的属主或root运行。可以使用pstack来确定进程挂起的位置。此命令允许使用的唯一选项是要检查的进程的PID。实例pstree以树结构显示进程pstree-pwork|grepadsshd(22669)—bash(22670)—ad_preprocess(4551)-+-{ad_preproc…

    2025年11月17日
    3
  • 大数据平台建设经验「建议收藏」

    大数据平台建设经验「建议收藏」大数据平台建设技术背景Facebook的DREP原则!!思路建设流程经验教训生产案例饿了么大数据平台建设大数据平台逻辑架构图工具链架构图!!流入三个源数据流的UV计算渠道订单一个大数据平台省了20个IT人力——敦奴数据平台建设案例分享引跑科技副总裁张晓东:引跑DBone数据库助力大数据建设需求挖掘五步曲,快速建设大数据项目整合公司3个网站后台管理子系统的经验总结-实现多系统的单点登录(ASP.N

    2022年6月12日
    36
  • 微信平台开发——日历服务

    微信平台开发——日历服务

    2021年9月4日
    50
  • int什么数据类型_SQL基本数据类型

    int什么数据类型_SQL基本数据类型 一开始看到Int16,Int32,Int64这三种类型就觉得有点怪,为什么要整个数字结尾的,这么干就是想让大家一眼就知道这个数据类型占多大空间吧.Int16,等于short,占2个字节.-3276832767Int32,等于int,占4个字节.-21474836482147483647Int64,等于long,占8个字节.-9223372036854…

    2022年8月15日
    3

发表回复

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

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