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


相关推荐

  • java获取当前日期 星期几_java获取当前日期是星期几的方法

    java获取当前日期 星期几_java获取当前日期是星期几的方法java 获取当前日期是星期几的方法发布时间 2020 06 2911 16 15 来源 亿速云阅读 133 作者 Leah 本篇文章为大家展示了 java 获取当前日期是星期几的方法 代码简明扼要并且容易理解 绝对能使你眼前一亮 通过这篇文章的详细介绍希望你能有所收获 第一种方法 获取当前日期是星期几 paramdate return 当前日期是星期几 publicString

    2025年9月28日
    5
  • CSS 图片去色处理

    CSS 图片去色处理说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。//黑白色img{transition:all.3sease;filter:grayscale(100%);opacity:.6;}//正常颜色img:hover{filter:none;opacity:1;

    2022年10月6日
    4
  • Tomcat 下载安装与配置

    Tomcat 下载安装与配置一、下载tomcat下载链接:https://tomcat.apache.org/1、进入tomcat官网后,选择需要下载的版本。我使用的是tomcat9,所以在这我选择tomcat92、选择z

    2022年8月5日
    6
  • 视频 | 一步步教你操作websocket通知案例「建议收藏」

    视频 | 一步步教你操作websocket通知案例

    2022年2月13日
    46
  • C语言的二维数组初始化的几种方式介绍(私藏大数组初始化方式)

    C语言的二维数组初始化的几种方式介绍(私藏大数组初始化方式)C 语言的二维数组初始化的几种方式介绍 1 直接赋值 2 循环对每个元素赋值 3 借用 memset memset s 初始化为 0 或 14 数组所有元素初始化为相同值 1 直接赋值适合数组元素较少的 各元素的值可以不同 int 2 3 arr1 5 2 4 10 2 1 2 循环对每个元素赋值对数组的每个元素进行赋值 各元素的值可以不同 就是效率比较低 int 2 3 arr2 inti j for i 0 i lt 2 i

    2025年11月29日
    5
  • vue阻止冒泡

    vue阻止冒泡vue 阻止冒泡在事件后面加上 stop el buttontype primary size small click stop editgGift 编辑 el buttontype primary size small click stop editgGift

    2026年1月26日
    1

发表回复

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

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