jQuery – INPUT type = File，Image FileTypevalidation选项？

我有以下内容：

在服务器上，我检查以确保它是一个图像，但我想首先检查客户端。

如果选择的文件输入文件不是gif，jpg，png或bmp，我如何使用jQuery提醒用户？

谢谢

Answer 1

您想要检查元素的值是什么，类似于：

 $("#user_profile_pic").change(function() { var val = $(this).val(); switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ case 'gif': case 'jpg': case 'png': alert("an image"); break; default: $(this).val(''); // error message here alert("not an image"); break; } }); 

编辑

代码根据注释更改 – 现在删除所选文件的值（如果不是图像）。

Answer 2

这很简单，不需要任何JavaScriptvalidation。 只需写这个，它只接受图像文件。

Answer 3

您可以使用正则表达式：

 var val = $("#user_profile_pic").val(); if (!val.match(/(?:gif|jpg|png|bmp)$/)) { // inputted file path is not an image of one of the above types alert("inputted file path is not an image!"); } 

当然，您可以为正则表达式添加更多格式。 有更复杂和全面的方法来实现这一点，但只要输入的图像文件路径以标准图像文件扩展名结束，此方法就可以完成任务。

Answer 4

可能有浏览器允许您创建给定路径的 ，您可以检查它是否是真实图像（如果不是onerror-event应该触发图像并且它将具有宽度/高度为0）。

但是因为这只适用于某些浏览器并且存在安全风险（在我看来）我不建议这样做，所以我的答案是： 你无法validation那里有什么。

检查Alex建议的文件扩展名可能是一个选项，但文件扩展名不保证它是否是图像。 但是，作为一个简单的预检（不是validation），它可能是有用的。

Answer 5

我们如何检查，用户选择图像文件？

• 通过文件扩展名validation
  它按预期工作，带有.png扩展名的文本文件在这里传递
• input[type=file][accept=image/*]它最初隐藏用户的non-image文件。 但是这个filter也适用于扩展。 用户仍然可以手动输入任何现有的文件名。

• 我们可以检查mime类型的结果dataUrl ，它以data:mimetype;base64,...开头。 所以，我们需要image/* mimetype。

   var file = $('#uploadfile'); file.on('change', function (e) { var reader = new FileReader(); reader.onload = function() { var data = reader.result; if (data.match(/^data:image\//)) { $('#thumbnail').attr('src', data); } else { console.error('Not an image'); } }; reader.readAsDataURL(file.prop('files')[0]); });