我目前正在尝试寻找一种方法来使用 jquery 来验证文件是否为图片格式(jpeg,jpg,bmp,gif,etc)。通过简单的.length 比较，我已经能够确定输入是否为空。我怎样才能检查文件类型并只接受有效的图片格式。
是否输入是否为空：
if ($.trim($('#textInput').val()).length == 0) {
alert("Should Not Be Empty!");
}
【问题讨论】：
标签： javascript jquery
给定一个文件输入：
var extension = $('#file_input').val().split('.').pop();
if (['bmp', 'gif', 'png', 'jpg', 'jpeg'].indexOf(extension) > -1) {
console.log('validated');
} else {
console.log('invalid extension');
}
对于更广泛的文件类型过滤，您最好使用服务器端验证。
【讨论】：
split('.')[1] 而不是split('.').pop()。基本上，如果你有一个像my.example.jpg 这样的文件名，扩展名就是例子。此后此问题已得到修复。
你可以做一个简单的函数来提取文件的扩展名：
function getExtension(file) {
return file.split('.').pop();
}
然后你可以检查输入值：
var file = $.trim($('#textInput').val());
if (['gif','png', ...].indexOf(getExtension(file)) > - 1) {
...
}
还可以看看这篇文章，也许有用：
How to validade in HTML5 to only allow in 'input type="file"' JPG, GIF or PNG?
【讨论】：
出于安全原因，您不应使用 javascript 测试有效的文件类型。 Javascript 只是客户端，因此您的脚本很容易被规避，或者用户可以简单地使用单独的扩展名重命名他们的文件，您的检查点将失败。
查看MIME types 和用户上传文件的服务器端验证。这是一个复杂的主题，由您决定要花多少时间在上面。更彻底的检查会提高安全性。
我使用的检查是文件大小、MIME 类型和上传位置（以确保没有人试图从远程站点上传脚本）。 PHP 中的这些函数是filesize、fileinfo、mime_content_type 和is_uploaded_file。其他语言也有类似的功能。
您可以进一步测试文件的位，以确保它不是恶意代码或通过欺骗 MIME 标头伪装成 JPEG 的文件。
【讨论】：