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

【问题标题】：Examine File Type (not Extension) before Upload上传前检查文件类型（不是扩展名）
【发布时间】：2014-11-17 18:52:51
【问题描述】：

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

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

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

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

对于我们的使用，简单的扩展验证是不够的，因为用户倾向于在上传之前重命名他们的文件而不转换它们。例如。我们检索无法转换为例如 PDF 图形由 libgd 制作的 png。

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

【问题讨论】：

@stefan 大多数文件格式在文件开头都有某种 ID/Header，因此首先加载例如 128 字节（或更多取决于所有支持的文件格式所需的最大偏移量）并检查每个如果找到 ID，则支持文件类型，如果没有，则一切正常，然后将其作为错误文件丢弃....（您需要的每种文件类型的谷歌文件格式，您会找到所需的一切...）

标签： javascript php jquery html upload

【解决方案1】：

是的，这是可能的（或者可能取决于特定的浏览器）。 HTML File API 允许您获取文件的 MIME 类型。详见文章Reading files in JavaScript using the File APIs，但基本思路如下：

对于文件输入元素：

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

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

$("#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 会将文件内容作为类型字节数组提供给您。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：