第1步：

Question

我已阅读this和this个问题，这似乎表明可以在客户端使用javascript检查文件MIME类型。现在，我知道真正的验证仍然必须在服务器端完成。我想执行客户端检查以避免不必要的服务器资源浪费。

要测试是否可以在客户端进行此操作，我将JPEG测试文件的扩展名更改为.png，然后选择要上载的文件。在发送文件之前，我使用javascript控制台查询文件对象：

document.getElementsByTagName('input')[0].files[0];

这是我在Chrome 28.0上获得的：

文件{webkitRelativePath：＆＃34;＆＃34;，lastModifiedDate：2012年10月16日星期二 10:00:00 GMT + 0000（UTC），名称：＆＃34; test.png＆＃34;，输入：＆＃34; image / png＆＃34;，大小： 500055 ...}

它显示类型为image/png，这似乎表明检查是基于文件扩展名而不是MIME类型完成的。我尝试了Firefox 22.0，它给了我相同的结果。但根据the W3C spec，MIME Sniffing应该实施。

我说得对，目前无法使用javascript检查MIME类型吗？或者我错过了什么？

Answer 1

在将其上传到服务器之前，您可以使用JavaScript的FileReader轻松确定文件MIME类型。我同意我们应该优先考虑客户端的服务器端检查，但仍然可以进行客户端检查。我将向您展示如何在底部提供工作演示。

检查您的浏览器是否同时支持File和Blob。所有主要的都应该。

if (window.FileReader && window.Blob) {
    // All the File APIs are supported.
} else {
    // File and Blob are not supported
}

第1步：

您可以从File这样的<input>元素中检索<input type="file" id="your-files" multiple> <script> var control = document.getElementById("your-files"); control.addEventListener("change", function(event) { // When the control has changed, there are new files var files = control.files, for (var i = 0; i < files.length; i++) { console.log("Filename: " + files[i].name); console.log("Type: " + files[i].type); console.log("Size: " + files[i].size + " bytes"); } }, false); </script>信息：{/ 3}}：

<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    // Cancel default actions
    event.preventDefault();
    var files = event.dataTransfer.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

以上是上述（ref）的拖放版本：

var blob = files[i]; // See step 1 above
console.log(blob.type);

第2步：

我们现在可以检查文件并梳理标题和MIME类型。

✘快速方法

您可以天真地向ref询问使用此模式表示的任何文件的MIME类型：

.jpg

对于图像，MIME类型如下所示：

图像/ JPEG
  图像/ PNG
  ...

警告：从文件扩展名中检测到MIME类型，可以被欺骗或欺骗。可以将.png重命名为image/png，并将MIME类型报告为var blob = files[i]; // See step 1 above var fileReader = new FileReader(); fileReader.onloadend = function(e) { var arr = (new Uint8Array(e.target.result)).subarray(0, 4); var header = ""; for(var i = 0; i < arr.length; i++) { header += arr[i].toString(16); } console.log(header); // Check the file signature against known types }; fileReader.readAsArrayBuffer(blob);。

✓正确的标题检查方法

要获取客户端文件的bonafide MIME类型，我们可以更进一步，检查给定文件的前几个字节，以便与所谓的Blob进行比较。请注意，这并不完全是直截了当的，因为例如magic numbers有一些“神奇的数字”。这是因为自1991年以来格式已经发展。你可能只检查前两个字节，但我更喜欢检查至少4个字节以减少误报。

JPEG（前4个字节）的示例文件签名：

FF D8 FF E0（SOI + ADD0）
  FF D8 FF E1（SOI + ADD1）
  FF D8 FF E2（SOI + ADD2）

以下是检索文件头的基本代码：

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown"; // Or you can use the blob.type as fallback
        break;
}

然后，您可以确定真实的MIME类型（更多文件签名JPEG和here）：

// Return the first few bytes of the file as a hex string
function getBLOBFileHeader(url, blob, callback) {
  var fileReader = new FileReader();
  fileReader.onloadend = function(e) {
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    callback(url, header);
  };
  fileReader.readAsArrayBuffer(blob);
}

function getRemoteFileHeader(url, callback) {
  var xhr = new XMLHttpRequest();
  // Bypass CORS for this demo - naughty, Drakes
  xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url);
  xhr.responseType = "blob";
  xhr.onload = function() {
    callback(url, xhr.response);
  };
  xhr.onerror = function() {
    alert('A network error occurred!');
  };
  xhr.send();
}

function headerCallback(url, headerString) {
  printHeaderInfo(url, headerString);
}

function remoteCallback(url, blob) {
  printImage(blob);
  getBLOBFileHeader(url, blob, headerCallback);
}

function printImage(blob) {
  // Add this image to the document body for proof of GET success
  var fr = new FileReader();
  fr.onloadend = function() {
    $("hr").after($("<img>").attr("src", fr.result))
      .after($("<div>").text("Blob MIME type: " + blob.type));
  };
  fr.readAsDataURL(blob);
}

// Add more from http://en.wikipedia.org/wiki/List_of_file_signatures
function mimeType(headerString) {
  switch (headerString) {
    case "89504e47":
      type = "image/png";
      break;
    case "47494638":
      type = "image/gif";
      break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      type = "image/jpeg";
      break;
    default:
      type = "unknown";
      break;
  }
  return type;
}

function printHeaderInfo(url, headerString) {
  $("hr").after($("<div>").text("Real MIME type: " + mimeType(headerString)))
    .after($("<div>").text("File header: 0x" + headerString))
    .after($("<div>").text(url));
}

/* Demo driver code */

var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"];

// Check for FileReader support
if (window.FileReader && window.Blob) {
  // Load all the remote images from the urls array
  for (var i = 0; i < imageURLsArray.length; i++) {
    getRemoteFileHeader(imageURLsArray[i], remoteCallback);
  }

  /* Handle local files */
  $("input").on('change', function(event) {
    var file = event.target.files[0];
    if (file.size >= 2 * 1024 * 1024) {
      alert("File size must be at most 2MB");
      return;
    }
    remoteCallback(escape(file.name), file);
  });

} else {
  // File and Blob are not supported
  $("hr").after( $("<div>").text("It seems your browser doesn't support FileReader") );
} /* Drakes, 2015 */

根据预期的MIME类型，根据需要接受或拒绝文件上传。

演示

这是本地文件和远程文件的工作演示（我不得不绕过CORS，仅用于此演示）。打开片段，运行它，您应该看到显示三种不同类型的远程图像。在顶部，您可以选择本地图像或数据文件，并显示文件签名和/或MIME类型。

请注意，即使重命名了图像，也可以确定其真正的MIME类型。见下文。

<强>截图

Expected output of demo

img {
  max-height: 200px
}
div {
  height: 26px;
  font: Arial;
  font-size: 12pt
}
form {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input type="file" />
  <div>Choose an image to see its file signature.</div>
</form>
<hr/>

{{1}}

Answer 2

如其他答案中所述，您可以通过检查文件第一个字节中文件的signature来检查mime类型。

但其他答案正在做的是将整个文件加载到内存中以检查签名，这非常浪费，如果您偶然选择一个大文件，可能会轻易冻结您的浏览器

/**
 * Load the mime type based on the signature of the first bytes of the file
 * @param  {File}   file        A instance of File
 * @param  {Function} callback  Callback with the result
 * @author Victor www.vitim.us
 * @date   2017-03-23
 */
function loadMime(file, callback) {
    
    //List of known mimes
    var mimes = [
        {
            mime: 'image/jpeg',
            pattern: [0xFF, 0xD8, 0xFF],
            mask: [0xFF, 0xFF, 0xFF],
        },
        {
            mime: 'image/png',
            pattern: [0x89, 0x50, 0x4E, 0x47],
            mask: [0xFF, 0xFF, 0xFF, 0xFF],
        }
        // you can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
    ];

    function check(bytes, mime) {
        for (var i = 0, l = mime.mask.length; i < l; ++i) {
            if ((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) {
                return false;
            }
        }
        return true;
    }

    var blob = file.slice(0, 4); //read the first 4 bytes of the file

    var reader = new FileReader();
    reader.onloadend = function(e) {
        if (e.target.readyState === FileReader.DONE) {
            var bytes = new Uint8Array(e.target.result);

            for (var i=0, l = mimes.length; i<l; ++i) {
                if (check(bytes, mimes[i])) return callback("Mime: " + mimes[i].mime + " <br> Browser:" + file.type);
            }

            return callback("Mime: unknown <br> Browser:" + file.type);
        }
    };
    reader.readAsArrayBuffer(blob);
}


//when selecting a file on the input
fileInput.onchange = function() {
    loadMime(fileInput.files[0], function(mime) {

        //print the output to the screen
        output.innerHTML = mime;
    });
};

<input type="file" id="fileInput">
<div id="output"></div>

Answer 3

如果您只是想检查上传的文件是否为图片，您可以尝试将其加载到<img>标记中，检查是否有任何错误回调。

示例：

var input = document.getElementsByTagName('input')[0];
var reader = new FileReader();

reader.onload = function (e) {
    imageExists(e.target.result, function(exists){
        if (exists) {

            // Do something with the image file.. 

        } else {

            // different file format

        }
    });
};

reader.readAsDataURL(input.files[0]);


function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
}

Answer 4

这是你必须要做的事情

var fileVariable =document.getElementsById('fileId').files[0];

如果要检查图像文件类型，请

if(fileVariable.type.match('image.*'))
{
 alert('its an image');
}

Answer 5

正如德雷克所说，这可以通过FileReader来完成。但是，我在这里介绍的是一个功能版本。请注意，使用JavaScript执行此操作的一个大问题是重置输入文件。好吧，这仅限于JPG（对于其他格式，您必须更改mime type和magic number）：

void handleData(Processor<string*>& processor) {

请注意，这是在最新版本的Firefox和Chrome以及IExplore 10上测试的。

For a complete list of mime types see Wikipedia

For a complete list of magic number see Wikipedia

Answer 6

对于任何不想自己实现此功能的人，Sindresorhus创建了一个实用程序，该实用程序可在浏览器中使用，并具有您可能想要的大多数文档的标头到MIME映射。

https://github.com/sindresorhus/file-type

您可以结合Vitim.us的建议，即只读取前X个字节，以避免使用此实用程序将所有内容加载到内存中（例如es6中的示例）：

import fileType from 'file-type'; // or wherever you load the dependency

const blob = file.slice(0, fileType.minimumBytes);

const reader = new FileReader();
reader.onloadend = function(e) {
  if (e.target.readyState !== FileReader.DONE) {
    return;
  }

  const bytes = new Uint8Array(e.target.result);
  const { ext, mime } = fileType(bytes);

  // ext is the desired extension and mime is the mimetype
};
reader.readAsArrayBuffer(blob);

Answer 7

我需要检查更多文件类型。

在 excellent answer 给出的 Drakes 之后，我发现 this website 具有非常广泛的文件类型及其标题表后，我想出了以下代码。十六进制和字符串。

我还需要一个异步函数来处理与我正在工作的项目相关的许多文件和其他问题，这些问题在这里无关紧要。

这是原生 javascript 中的代码。

// getFileMimeType
// @param {Object} the file object created by the input[type=file] DOM element.
// @return {Object} a Promise that resolves with the MIME type as argument or undefined
// if no MIME type matches were found.
const getFileMimeType = file => {

    // Making the function async.
    return new Promise(resolve => {
        let fileReader = new FileReader();
        fileReader.onloadend = event => {
            const byteArray = new Uint8Array(event.target.result);

            // Checking if it's JPEG. For JPEG we need to check the first 2 bytes.
            // We can check further if more specific type is needed.
            if(byteArray[0] == 255 && byteArray[1] == 216){
                resolve('image/jpeg');
                return;
            }

            // If it's not JPEG we can check for signature strings directly.
            // This is only the case when the bytes have a readable character.
            const td = new TextDecoder("utf-8");
            const headerString = td.decode(byteArray);

            // Array to be iterated [<string signature>, <MIME type>]
            const mimeTypes = [
                // Images
                ['PNG', 'image/png'],
                // Audio
                ['ID3', 'audio/mpeg'],// MP3
                // Video
                ['ftypmp4', 'video/mp4'],// MP4
                ['ftypisom', 'video/mp4'],// MP4
                // HTML
                ['<!DOCTYPE html>', 'text/html'],
                // PDF
                ['%PDF', 'application/pdf']
                // Add the needed files for your case.
            ];

            // Iterate over the required types.
            for(let i = 0;i < mimeTypes.length;i++){
                // If a type matches we return the MIME type
                if(headerString.indexOf(mimeTypes[i][0]) > -1){
                    resolve(mimeTypes[i][1]);
                    return;
                }
            }

            // If not is found we resolve with a blank argument
            resolve();

        }
        // Slice enough bytes to get readable strings.
        // I chose 32 arbitrarily. Note that some headers are offset by
        // a number of bytes.
        fileReader.readAsArrayBuffer(file.slice(0,32));
    });

};

// The input[type=file] DOM element.
const fileField = document.querySelector('#file-upload');
// Event to detect when the user added files.
fileField.onchange = event => {

    // We iterate over each file and log the file name and it's MIME type.
    // This iteration is asynchronous.
    Array.from(fileField.files).forEach(async file => {
        console.log(file.name, await getFileMimeType(file));
    });

};

请注意，在 getFileMimeType 函数中，您可以使用两种方法来查找正确的 MIME 类型。

直接搜索字节。
将字节转换为字符串后搜索字符串。

我对 JPEG 使用第一种方法，因为使其可识别的是前 2 个字节，而这些字节不是可读的字符串字符。

对于其余的文件类型，我可以检查可读的字符串字符签名。例如： [视频/mp4] -> 'ftypmp4' 或 'ftypisom'

如果您需要支持不在 Gary Kessler 列表中的文件，您可以通过 console.log() 字节或转换后的字符串为您需要支持的晦涩文件找到合适的签名。

Answer 8

简短的回答是否定的。

当您注意到浏览器从文件扩展名派生type时。 Mac预览似乎也在扩展中运行。我假设它是因为它更快地读取指针中包含的文件名，而不是查找并读取磁盘上的文件。

我制作了一个用png重命名的jpg副本。

我能够始终从chrome中的两个图像中获得以下内容（应该可以在现代浏览器中使用）。

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90

您可以检查String.indexOf（＆＃39; jpeg＆＃39;）检查图像类型。

这是探索http://jsfiddle.net/bamboo/jkZ2v/1/

的小提琴

我忘了在示例中评论的阴谋线

console.log( /^(.*)$/m.exec(window.atob( image.src.split(',')[1] )) );

拆分base64编码的img数据，留在图像上
Base64解码图像
仅匹配图像数据的第一行

小提琴代码使用了无法在IE9中运行的base64解码，我确实找到了一个很好的例子，使用的是在IE http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

中运行的VB脚本

加载图片的代码取自Joel Vardy，他在上传之前正在做一些很酷的图片画布调整客户端，这可能会引起人们的兴趣https://joelvardy.com/writing/javascript-image-upload

Answer 9

这是Roberto14的答案的扩展，其中包含以下内容：

这只会允许图像

检查FileReader是否可用，如果不可用则退回扩展检查。

如果不是图像，则提供错误警告

如果是图像则会加载预览

**你仍然应该进行服务器端验证，这对最终用户来说比其他任何东西更方便。但它很方便！

<form id="myform">
    <input type="file" id="myimage" onchange="readURL(this)" />
    <img id="preview" src="#" alt="Image Preview" />
</form>

<script>
function readURL(input) {
    if (window.FileReader && window.Blob) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function() {
                    var preview = document.getElementById('preview');
                    preview.src = e.target.result;
                    };
                img.onerror = function() { 
                    alert('error');
                    input.value = '';
                    };
                img.src = e.target.result;
                }
            reader.readAsDataURL(input.files[0]);
            }
        }
    else {
        var ext = input.value.split('.');
        ext = ext[ext.length-1].toLowerCase();      
        var arrayExtensions = ['jpg' , 'jpeg', 'png', 'bmp', 'gif'];
        if (arrayExtensions.lastIndexOf(ext) == -1) {
            alert('error');
            input.value = '';
            }
        else {
            var preview = document.getElementById('preview');
            preview.setAttribute('alt', 'Browser does not support preview.');
            }
        }
    }
</script>

Answer 10

这是一个支持webp的Typescript实现。这是基于Vitim.us的JavaScript答案。

interface Mime {
  mime: string;
  pattern: (number | undefined)[];
}

// tslint:disable number-literal-format
// tslint:disable no-magic-numbers
const imageMimes: Mime[] = [
  {
    mime: 'image/png',
    pattern: [0x89, 0x50, 0x4e, 0x47]
  },
  {
    mime: 'image/jpeg',
    pattern: [0xff, 0xd8, 0xff]
  },
  {
    mime: 'image/gif',
    pattern: [0x47, 0x49, 0x46, 0x38]
  },
  {
    mime: 'image/webp',
    pattern: [0x52, 0x49, 0x46, 0x46, undefined, undefined, undefined, undefined, 0x57, 0x45, 0x42, 0x50, 0x56, 0x50],
  }
  // You can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
];
// tslint:enable no-magic-numbers
// tslint:enable number-literal-format

function isMime(bytes: Uint8Array, mime: Mime): boolean {
  return mime.pattern.every((p, i) => !p || bytes[i] === p);
}

function validateImageMimeType(file: File, callback: (b: boolean) => void) {
  const numBytesNeeded = Math.max(...imageMimes.map(m => m.pattern.length));
  const blob = file.slice(0, numBytesNeeded); // Read the needed bytes of the file

  const fileReader = new FileReader();

  fileReader.onloadend = e => {
    if (!e || !fileReader.result) return;

    const bytes = new Uint8Array(fileReader.result as ArrayBuffer);

    const valid = imageMimes.some(mime => isMime(bytes, mime));

    callback(valid);
  };

  fileReader.readAsArrayBuffer(blob);
}

// When selecting a file on the input
fileInput.onchange = () => {
  const file = fileInput.files && fileInput.files[0];
  if (!file) return;

  validateImageMimeType(file, valid => {
    if (!valid) {
      alert('Not a valid image file.');
    }
  });
};

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

如何在上传前用javascript检查文件MIME类型？

10 个答案:

第1步：

第2步：

演示