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)


相关推荐

  • C语言二进制与十进制之间的转换[通俗易懂]

    C语言二进制与十进制之间的转换[通俗易懂]二进制与十进制之间的转换#include&amp;amp;amp;amp;amp;lt;stdio.h&amp;amp;amp;amp;amp;gt;voidconvert(intn){ if(n&amp;amp;amp;amp;amp;gt;1) { convert(n/2);} printf(&amp;amp;amp;amp;quot;%d&amp;amp;amp;amp;quot;,n%2);}intmain(){ int

    2022年10月18日
  • java数据类型有哪几种_java数据类型有哪些

    java数据类型有哪几种_java数据类型有哪些Java中的数据类型分为两大类分别是基本类型和引用类型,基本类型包含int,float,double,char,boolean等八种类型,引用类型包含类,数组,接口三种类型。【推荐课程:Java教程】java数据类型有:1、基本数据类型简单数据类型是不能简化的、内置的数据类型、由编程语言本身定义,它表示了真实的数字、字符和整数。在Java中共有八种基本数据类型,它们分别是以下几种类型:数据类型描述…

  • ajax 写法_常见词缀汇总

    ajax 写法_常见词缀汇总title:Ajax写法date:2018-06-3011:01:47tags:Ajax写法作者:李忠林Github: https://github.com/LeezhonglinGitblog:https://leezhonglin.github.io/什么是AJAX?AJAX=AsynchronousJavaScriptandXML(异步的JavaScript和…

  • 线性内插interp1函数用法

    线性内插interp1函数用法线性内插是假设在二个已知数据中的变化为线性关系,因此可由已知二点的座标(a,b)去计算通过这二点的斜线,公式如下:其中 a 在上式的 b 点即是代表要内插的点,f(b) 则是要计算的内插函数值。下图即是一个以二种内插法的比较\pcxfile[12cm,5cm]{fig9_1.pcx}\caption{线性式与spline函数的曲线契合}线性内插是最简单的内插方

  • sql优化的几种方法面试题_mysql存储过程面试题

    sql优化的几种方法面试题_mysql存储过程面试题drop、delete与truncate分别在什么场景之下使用?对比一下他们的区别:droptable1)属于DDL2)不可回滚3)不可带where4)表内容和结构删除5)删除速度快truncatetable1)属于DDL2)不可回滚3)不可带where4)表内容删除5)删除速度快deletefrom1)属于DML2)可回滚3)可带where4)表结构在,表内容要看where执行的情况5)删…

  • linux复制文件到当前目录并重命名_Linux复制文件到当前文件夹

    linux复制文件到当前目录并重命名_Linux复制文件到当前文件夹./表示当前目录cptest/*.wav./-r递归子目录cp-r绝对路径/文件目标路径cp-r绝对路径/*.wav目标路径copy一个目录下的所有文件以及递归文件到当前文件夹cp-raudios/*./

发表回复

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

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