如何让 <input type="file"> 只接受图像文件？

Question

我只需要通过 <input type="file"> 标签上传图像文件。

现在，它接受所有文件类型。但是，我想将其限制为仅包含 .jpg 、 .gif 等的特定图像文件扩展名。

我怎样才能实现这个功能？

原文由 kbvishnu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用输入标签的 接受 属性。要仅接受 PNG、JPEG 和 GIF，您可以使用以下代码：

 <label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

或者简单地说：

 <label>Your Image File
  <input type="file" name="myImage" accept="image/*" />
</label>

请注意，这只会向浏览器提供提示，告知要向用户显示哪些文件类型，但这很容易绕过，因此您也应该始终在服务器上验证上传的文件。

它应该适用于 IE 10+、Chrome、Firefox、Safari 6+、Opera 15+，但在手机上的支持非常粗略（截至 2015 年），根据一些报告，这实际上可能会阻止某些移动浏览器上传任何内容，所以一定要很好地测试你的目标平台。

有关详细的浏览器支持，请参阅 http://caniuse.com/#feat=input-file-accept

原文由 madcap laughs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用这个：

 <input type="file" accept="image/*">

适用于 FF 和 Chrome。

原文由 Tyilo 发布，翻译遵循 CC BY-SA 3.0 许可协议