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

2018-06-16 02:52:09

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

为了测试这是否可以在客户端完成，我将JPEG测试文件的扩展名更改为.png并选择要上传的文件。在发送文件之前，我使用javascript控制台查询文件对象：

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

这是我在Chrome 28.0上得到的结果：

File {webkitRelativePath：“”，lastModifiedDate：Tue Oct 16 2012 10:00:00 GMT + 0000（UTC），name：“test.png”，输入：“image / png”，size：500055 ...}

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

我有权说现在没有办法用javascript检查MIME类型吗？或者我错过了什么？

在上传到服务器之前，您可以使用JavaScript的FileReader轻松确定文件的MIME类型。我同意我们应该更喜欢通过客户端进行服务器端检查，但客户端检查仍然是可能的。我会告诉你如何在底部提供一个工作演示。

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

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

步骤1：

您可以从像这样的<input>元素（ref）检索File信息：

<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>

这是上面（ref）的拖放版本：

<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>

第2步：

我们现在可以检查这些文件并查找标题和MIME类型。

✘快速方法

您可以使用此模式简单地向Blob询问其代表的任何文件的MIME类型：

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

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

图像/ JPEG
图像/ PNG
...

警告：从文件扩展名中检测到MIME类型，可能被愚弄或欺骗。可以将.jpg重命名为.png ，并将MIME类型报告为image/png 。

✓正确的标题检查方法

要获得客户端文件的真正MIME类型，我们可以进一步检查给定文件的前几个字节，以便与所谓的幻数进行比较。被警告说它并不完全简单，因为例如，JPEG有一些“幻数”。这是因为该格式自1991年以来已经发展。您可能只能检查前两个字节，但我宁愿检查至少4个字节以减少误报。

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

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

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

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);

然后，您可以像这样确定真正的MIME类型（更多文件签名在这里和这里）：

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类型接受或拒绝文件上传。

演示

这里是本地文件和远程文件的一个工作演示（我不得不为本演示绕过CORS）。打开代码片段，运行它，你会看到三个不同类型的远程图像显示。在顶部，您可以选择本地图像或数据文件，并显示文件签名和/或MIME类型。

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

截图

演示的预期输出

// 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 */

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/>

如果您只想检查上传的文件是否为图片，您可以尝试将其加载到<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;
}

正如其他答案中所述，您可以通过检查文件第一个字节中的文件签名来检查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 N. wwww.victorborges.com
 * @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>

链接地址: http://www.djcxy.com/p/45669.html

上一篇: How to check file MIME type with javascript before upload?

下一篇: How to check file types of uploaded files in PHP?