Question

可以使用JQuery的Valdation插件验证要在HTML表单中上传的文件的扩展名：

<form enctype="multipart/form-data" id="form-id">
   <input type="file" name="file-id" id="file-id" />
</form>

这可以通过JQuery的验证插件使用规则验证

$("#form-id").validate({
    rules: {
        file-id: {
            extension: ["jpg","png","gif"]
        }
});

对于我们的使用，简单的扩展验证是不够的，因为用户倾向于在上传之前将图像重命名为图形而不转换它们。例如。我们检索无法转换为PDF格式的PDF图形pg＆＃39; s libgd。

有没有办法检查图形文件的真实内容并阻止上传不可处理的格式？

Answer 1

是的，可以（或者可能取决于特定的浏览器）。 HTML File API允许您获取文件的MIME类型。有关详细信息，请参阅文章Reading files in JavaScript using the File APIs，但基本概念如下：

对于文件输入元素：

<input type="file" id="file-input">

您可以从中获取FileList对象，File对象，每个对象都有一个解析为MIME类型的type属性：

$("#file-input").on("change", function (evt) {
    var files = evt.target.files;
    $.each(files, function (i, file) {
        if (file.type === "image/jpeg") {
            alert("It's a JPEG");
        }
        else if (file.type === "image/png") {
            alert("It's a PNG");
        }
        else {
            alert('The file MIME type is "' + file.type + '"');
        }
    });
});

如果您需要超出MIME类型，可以通过FileReader API打开并阅读文件的内容。方法readAsArrayBuffer将为文件内容提供一个类型化字节数组。

Answer 2

您要查找的是文件的MIME类型。

如果您使用的是HTML文件选择器，则可以使用以下方式获取类型：

document.getElementById('fileChooserID').files[0].type

请注意，这将检查客户端的MIME类型，因此这还不够。您永远不能单独信任客户端进行验证。在服务器端，您应该检查请求content-type上的请求HEAD。

在上传之前检查文件类型（不是扩展名）

2 个答案: