html-文件上传设置accept类型延时问题

    今天在做文件上传时,采用了jQuery的upload插件,使用过程中发现了一个很有意思也很头疼的问题。
  上传按钮,第一次点击时瞬间就可以打开文件选择框,之后再点击则需要等待恐怖的8s以上。
  百度后,最终确定原因是插件自动设置的mime_types类型会转换成 input[type=file] 标签的 accept 属性值,打开文件选择框时会根据accept值过滤目录中的文件,仅显示允许的文件类型。而这个过滤的过程,需要时间,因此会出现延时问题。
  源代码如下:
  

  同理,html5中accept设置也会出现该问题。

  比如,在代码中使用了HTML5的input[file]标签去上传图片

  <input type="file" name="file" class="element" accept="image/*">
     在上面代码中,使用了 accept=”image/*” 去过滤所有非图片的文件

   点击input之后,会有一定概率出现文件选择框弹出非常慢的问题,正常情况下,不到1S就能弹出文件选择框。但是慢的时候,可能达到7 ~ 10秒。

  对属性进行逐一排查后,发现是accept=”image/*”的问题。

  将accept=”image/*”改为指定的图片格式就不会出现上述的概率性问题,需要将上传图片的过滤格式指定为常用的几种格式

  <input type="file" name="file" class="element" accept="image/jpg,image/jpeg,image/png">
  当然,如果希望过滤所有的非图片格式,那么这个问题还是会存在。

  原因初步猜想是当设置accept=”image/*”时,浏览器会在弹出框中处理所有的非图片元素,包含所有的图片格式,如果文件较多会增加处理时间,而这个时候可能在这个版本的chrome中有bug(也许是底层没实现好),导致概率性时间增长。

 

  所以,对于 <input type="file" name="file" class="element" accept="image/*"> 填写file上传限制时,需要填写准确的mime类型,不能填写后缀(如:.apk),与通配符(如:image/*)


 

 

posted @ 2017-04-26 14:27  ESnail  阅读(858)  评论(0编辑  收藏  举报