Question

我目前正在尝试找到一种方法来使用jquery来验证文件是否为图片格式(jpeg,jpg,bmp,gif,etc)。通过简单的.length比较，我已经能够确定输入是否为空。我怎样才能检查文件类型并只接受有效的图片格式。

是否输入：

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) {
     ...
}

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

How to validade in HTML5 to only allow in 'input type="file"' JPG, GIF or PNG?

Answer 3

出于安全原因，您不应使用javascript测试有效的文件类型。 Javascript只是客户端，因此您的脚本可以轻松避开，或者用户只需使用单独的扩展名重命名文件，您的检查点就会失败。

查看用户上传文件的MIME types和服务器端验证。这是一个复杂的主题，由您自己决定要花多少时间。通过更彻底的检查，安全性会增加。

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

例如，您可以更进一步测试文件的位，以确保它不是恶意代码或假装为JPEG的文件，例如，通过欺骗MIME标头。

文件输入：比较文件类型并仅接受图片格式（jpg，bmp等）

3 个答案: