限制file uploadselect到特定types

无论如何通过<input type="file" />元素限制文件types的select？

例如，如果我只想要上传图像types，我将限制可能的select（图像/ JPG，图像/ GIF，图像/ PNG），select对话框会灰色的其他MIMEtypes的文件。

ps我知道我可以通过扫描.type属性在File API之后做到这一点。 我真的试图限制这个事先手..我也知道我可以通过闪光灯做到这一点，但我不想有这个使用闪光灯。

Answer 1

这个特定的目的有一个html属性叫做accept但它在浏览器上几乎没有支持。 由于这个服务器端validation，build议改为。

 <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> 

如果您无法访问后端，请查看基于Flash的解决scheme（如SWFUpload） 。

在这里看到更多的信息： 文件input“接受”属性 – 是否有用？

Answer 2

最好让用户select任何文件，然后检查它的types – 这是浏览器更好的支持：

 var file = (el[0].files ? el[0].files[0] : el[0].value || undefined), supportedFormats = ['image/jpg','image/gif','image/png']; if (file && file.type) { if (0 > supportedFormats.indexOf(file.type)) { alert('unsupported format'); } else { upload(); } } 

您还可以使用file.size属性检查文件大小。