相信大家都写过
<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类型就可解决。

input type="file" accept="image/*"上传文件慢的问题解决办法的更多相关文章

  1. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  2. input type=file实现图片上传

    <label for="file"> <img src="images/morende.jpg" alt=""> & ...

  3. input type="file"多图片上传 原生html传递的数组集合

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  4. input type="file"多图片上传

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  5. input file标签限制上传文件类型

    用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...

  6. input type=file accept中可以限制的文件类型

    在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...

  7. <input type="file"> accept属性筛选文件类型

    如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input ty ...

  8. input type=file accept中文件格式限制

    原文链接:https://blog.csdn.net/usuallyuser/article/details/83060341 accept="application/msexcel,app ...

  9. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

随机推荐

  1. Monkey测试命令【学习笔记】

    monkey --ignore-crashes --ignore-timeouts --ignore-security-exceptions --ignore-native-crashes -v 30 ...

  2. JQuery中选择元素的方法:

    document.getElementById('div1');document.getElementsByTagName('div');getByClass(document,'box'); $(' ...

  3. NSNumber 与NSValue

    NSNumber与NSValue关系与作用 .由于集合里只能存放对象,不可以存放基本数据类型,所以我们有时候需要讲一些对象比如基本数据类型,结构体等存到NSDictionary NSArray中,我们 ...

  4. [Kafka] - Kafka Java Producer代码实现

    根据业务需要可以使用Kafka提供的Java Producer API进行产生数据,并将产生的数据发送到Kafka对应Topic的对应分区中,入口类为:Producer Kafka的Producer ...

  5. 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...

  6. 十一 web爬虫讲解2—Scrapy框架爬虫—Scrapy使用

    xpath表达式 //x 表示向下查找n层指定标签,如://div 表示查找所有div标签 /x 表示向下查找一层指定的标签 /@x 表示查找指定属性的值,可以连缀如:@id @src [@属性名称= ...

  7. java多线程补:充原子性和可见性

    参考:http://www.cnblogs.com/mengyan/archive/2012/08/22/2651575.html 原子性:所谓原子性就是不可分割的,比如:在我们编程中直接给变量赋值, ...

  8. ubuntu 安装python3.7 以及安装pip3 出现Command '('lsb_release', '-a')' returned non-zero exit status 1问题解决

    最近因为电脑重装,东西全没了,总计一下最近重装环境的过程. 如果没有安装包,请下载: wget http://www.python.org/ftp/python/3.7.0/Python-3.7.0. ...

  9. vue项目中报常见错误

    最近做项目,添加了less样式之后报错, 添加了如下样式: 报错如下图: 于是,就把相关的依赖也都安装了 以为这样会好使啦,后来发现原来是vue-style-loader的问题, 安装的vue-sty ...

  10. 详解 WebAPI 签名机制

    首先,写这篇文章的原因是因为最近某一个项目中的接口被人为调用了,导致了数据库数据被串改.虽然是内部人无意点的,但还是引起了我的担忧,所有整理了下关于WebAPI的相关签名机制. 一.我们在开发接口时, ...