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

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 基于深度学习的车辆检测系统(MATLAB代码,含GUI界面)

    基于深度学习的车辆检测系统(MATLAB代码,含GUI界面)摘要:当前深度学习在目标检测领域的影响日益显著,本文主要基于深度学习的目标检测算法实现车辆检测,为大家介绍如何利用MATLAB设计一个车辆检测系统的软件,通过自行搭建YOLO网络并利用自定义的数据集进行训练、验证模型,最终实现系统可选取图片或视频进行检测、标注,以及结果的实时显示和保存。其中,GUI界面利用最新的MATLABAPP设计工具开发设计完成,算法部分选择时下实用的YOLOv2/v3网络,通过BDD100K数据集进行训练、测试检测器效果。本文提供项目所有涉及到的程序代码、数据集等文件,完整资源。

    2022年10月15日
  • 基于近邻的协同过滤算法「建议收藏」

    基于近邻的协同过滤算法「建议收藏」这节课我们来学习K近邻在推荐系统中的应用,你将完成本课程的第一个实战项目:基于KNN的电影推荐系统!为了使你能够顺利地完成实战内容,我们先了解一下推荐系统中的基础知识。基于近邻用户的协同过滤假定有一个场景:某个周日的下午,你感觉很无聊,然后从电脑上打开了一个视频网站,想看下最近有什么好看的电影。然而你发现网站上的热门电影基本都看过,其他的电影又太多,不知道该看什么。想使用搜索框去查一下,但是又不知道该搜什么关键词,这个时候你的内心很焦灼,总不能挨个去尝试吧,那时间成本也太大了…仔细想想还是有办法的,那

  • 十六进制与十进制的互相换换计算

    十六进制与十进制的互相换换计算十六进制与十进制的互相换换计算

  • HDOJ 5000 Clone

    HDOJ 5000 Clone

  • jQuery操作table tr td

    jQuery操作table tr td

  • Fiddler+雷电模拟器进行APP抓包

    Fiddler+雷电模拟器进行APP抓包1、Fiddler下载地址:下载最新版Fiddler,强烈建议在官网下载:https://www.telerik.com/download/fiddler雷电模拟器下载地址:选择3.0正式版(注意,高版本无法抓包,只能下载3.0正式版)https://www.ldmnq.com/other/version-history-and-release-notes.html?log=3正常傻瓜式安装,下一步,下一步,安装完毕后,先不用急于打开软件。3.下载并安装Fiddler证书生成器:http:

发表回复

您的电子邮箱地址不会被公开。

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