JS-关于input的小技巧

319 阅读1分钟

问题

部分浏览器下比如chromeinput[type=file]打开时慢、卡顿

有没有遇到过这个问题?不需要任何请求,打开本地文件有时需要花上十秒钟,崩溃啊!

解决方案

将input的属性accept="image/png,image/jpeg.."

原因

  • chrome的SafeBrowsing功能会在上传或保存时检查文件
  • 网络速度会影响
  • 网络较慢时,SafeBrowsing会让chrome挂起一段时间,直到文件检查结束或超时
  • png&jpeg 这些MIME类型在SafeBrowsing的白名单里面,不需要检查

然后你又发现,假如我要上传zip/rar这些文件,指定好并没什么用。所以这是为啥呢。。

其实归根结底是因为你在大陆

还有一种方法是打开你chrome的设置,找到以下,把它关了试试。。。

噢~ 你会发现!就算accept=image/*打开文件选择框也不卡顿了~!打开zip文件也不卡顿了~!

其实你仔细去分析它的请求,在上图打开的时候,会发起一个关于SafeBrowsing的请求,求着求着就过时了。。。然后你就卡了。。。

当你关闭后,就没有这个请求的过程,也就不存在超时了。。。

嗯,棒极了。