文件输入:比较文件类型，只接受图片格式(jpg、bmp等)

Question

我目前正在设法使用jquery来验证一个文件是否为图片格式的(jpeg,jpg,bmp,gif,etc)。通过简单的.length比较，我已经能够知道输入是否为空。我如何能够检查文件类型，并只接受有效的图片格式。

Emtpy或非输入：

if ($.trim($('#textInput').val()).length == 0) {
    alert("Should Not Be Empty!");
}

Answer 1

给定文件输入：

var extension = $('#file_input').val().split('.').pop();
if (['bmp', 'gif', 'png', 'jpg', 'jpeg'].indexOf(extension) > -1) {
    console.log('validated');
} else {
    console.log('invalid extension');
}

对于更广泛的文件类型筛选，最好使用服务器端验证。

Answer 2

您可以创建一个简单的函数来提取文件的扩展名：

function getExtension(file) {
    return file.split('.').pop();
}

然后可以检查输入值：

var file = $.trim($('#textInput').val());
if (['gif','png', ...].indexOf(getExtension(file)) > - 1) {
     ...
}

也可以查看这篇文章，也许有用：

如何在HTML5中验证只允许“输入type=”文件“‘JPG，GIF或PNG？

Answer 3

出于安全考虑，您不应该使用javascript测试有效的文件类型。Javascript仅限于客户端，因此您的脚本很容易被回避，或者用户只需用单独的扩展名重命名他们的文件，您的检查点就会失败。

查看用户上传文件的MIME类型和服务器端验证。这是一个复杂的问题，要由你来决定你想花多少时间在上面。通过更彻底的检查，安全措施得到加强。

我使用的检查是文件大小、MIME类型和上传位置(以确保没有人试图从远程站点上载脚本)。PHP中的这些函数是filesize、fileinfo、mime_content_type和is_uploaded_file。其他语言中也有类似的功能。

您还可以进一步测试文件的位数，以确保它不是恶意代码，或者通过欺骗MIME头来伪装为JPEG的文件。