在文件上传控件（input type='file'）中，可以通过accept属性实现对文件类型的过滤。
一、相关代码：
下面给出对应的文件上传控件代码：
<input type="file" id="myFile" accept="image/jpeg,image/gif,application/msword"/><br/>
上面的代码表示限制文件上传类型为.jpg/.gif/.doc。
二、限制规则：
在文件上传控件的accept属性中，接受以下两种格式的限制符：
- 文件类型，但不限制具体扩展名，如：image/*，就只要是图片就行。
- 文件类型+具体的文件扩展类型，如：image/jpeg，使用的是MIME_TYPE类型
- 多个MIME_TYPE类型之间用逗号分隔。
三、accept属性具体接受的类型：
accept这个属性，只在FF，ie10和chrome中有效。
以下是常用的类型：
四、兼容性问题：
我们在代码中使用了HTML5的input[file]标签去上传图片
<input type="file" name="file" class="element" accept="image/*">
同时，在上面代码中，使用了 accept=”image/*” 去过滤所有非图片的文件。但是，这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题，可能要等 6~10s 才能弹出文件选择对话框。简直不能忍呀。在IE和Firefox中使用accept="image/*"属性则没有发现响应延迟的问题。
对属性进行逐一排查后，发现是accept=”image/*”的问题。将accept=”image/*”改为指定的图片格式就不会出现上述的概率性问题，所以我将上传图片的过滤格式指定为了常用的几种格式
<input type="file" name="file" class="element" accept="image/jpg,image/jpeg,image/png">
当然，如果希望过滤所有的非图片格式，那么这个问题还是会存在。原因初步猜想是当设置accept=”image/*”时，浏览器会在弹出框中处理所有的非图片元素，包含所有的图片格式，如果文件较多会增加处理时间，而这个时候可能在这个版本的chrome中有bug（也许是底层没实现好），导致概率性时间增长。