相信大家都写过
<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. NOIP 转圈游戏

    描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,……,依此类推 ...

  2. 如何实现一个简单的RPC

    在如何给老婆解释什么是RPC中,我们讨论了RPC的实现思路. 那么这一次,就让我们通过代码来实现一个简单的RPC吧! RPC的实现原理 正如上一讲所说,RPC主要是为了解决的两个问题: 解决分布式系统 ...

  3. dubbo学习小结

    dubbo学习小结 参考: https://blog.csdn.net/paul_wei2008/article/details/19355681 https://blog.csdn.net/liwe ...

  4. oracle between、 all、 in 和 exists的区别,模糊查询、4个正则表达式

    --条件比较 /* =,!=,<>,<,>,<=,>=, any,some,all is null,is not null between x and y in(l ...

  5. gitlab 备份

    gitlab 备份 gitlab-rake gitlab:backup:create 执行之后,就会生成一个备份文件 [root@iZuf6dztc469onegfborf5Z backups]# l ...

  6. ie if判断

    <p> </p> <!--[if lt IE 7]> <html lang="en" ng-app="myApp" c ...

  7. easyui datagrid 行编辑功能

    datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...

  8. 51nod 1326 奇妙的spfa+dp

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1326 1326 遥远的旅途 题目来源: TopCoder 基准时间限制: ...

  9. Elasticsearch压缩索引——lucene倒排索引本质是列存储+使用嵌套文档可以大幅度提高压缩率

    注意:由于是重复数据,词法不具有通用性!文章价值不大! 摘自:https://segmentfault.com/a/1190000002695169 Doc Values 会压缩存储重复的内容. 给定 ...

  10. 33-THREE.JS 圆柱体

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...