解决 input[file] 中使用 accept="image

2020-01-15 本文已影响0人大前端圈

在使用 input 上传图片的时候，为了避免用户选择非图片的文件，于是就在 input 标签里面加入了 accept="image/*" 来规定能够上传的文件类型。如下：

<input type="file" name="pic" accept="image/*" />
1
这样虽然解决了避免了非法文件，但是出现了一个问题，就是打开文件框的速度太慢。在没有这accept属性时，基本上是秒点秒开，但是加了以后要等5秒左右，这样就导致了用户体验非常不友好。

后来经过搜索才找到了原因，学过正则表达式的会知道，* 表示通配符，image/* 的意思就是找到所有图片类型的文件，它会对每一个文件进行校验，当文件数量过多时，就会出现响应时间过久的问题。

解决办法就是将通配符 * 换成指定的图片类型，从而减少检验文件的次数。