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

我读过一些文章和问题，它们似乎建议可以在客户端使用javascript检查文件MIME类型。现在，我知道真正的验证仍然必须在服务器端完成。我想执行客户端检查，以避免不必要的服务器资源浪费

为了测试是否可以在客户端执行此操作，我将

JPEG

测试文件的扩展名更改为

.png

，并选择要上载的文件。在发送文件之前，我使用javascript控制台查询文件对象：

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

这是我在Chrome 28.0上得到的：

文件{webkitRelativePath:”，最后修改日期：2012年10月16日星期二 10:00:00 GMT+0000（UTC），名称：“test.png”，类型：“image/png”，大小： 500055…}

它将类型显示为

image/png

，这似乎表明检查是基于文件扩展名而不是MIME类型完成的。我尝试了Firefox22.0，它给了我同样的结果。但根据中国的实际情况，应该实施

我说目前没有办法用javascript检查MIME类型，对吗？还是我遗漏了什么？

简短的回答是否定的

正如您所注意到的，浏览器从文件扩展名派生

type

。Mac预览版似乎也没有扩展。我假设是这样，因为读取指针中包含的文件名比查找和读取磁盘上的文件更快

我复制了一个用png重命名的jpg

我能够在chrome中从两个图像中一致地获得以下内容（在现代浏览器中应该可以工作）

JFIF；创建者：gd jpeg v1.0（使用IJG jpeg v62），质量=90

你可以从中提取一个字符串。indexOf（'jpeg'）检查图像类型

这里有一把小提琴要探索

我在示例中忘记注释的含糊不清的行

console.log（/^（.*）$/m.exec（window.atob（image.src.split（'，'）[1]））


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

fiddle代码使用base64解码，这在IE9中不起作用，我确实找到了一个在IE中使用VB脚本的好例子

加载图像的代码取自Joel Vardy，他正在上传之前对客户端进行一些很酷的图像画布大小调整，这可能会引起您的兴趣
在上传到服务器之前，您可以使用JavaScript的
FileReader
轻松确定文件MIME类型。我同意我们应该更喜欢服务器端检查而不是客户端检查，但是客户端检查仍然是可能的。我将向您展示如何操作，并在底部提供一个工作演示


检查您的浏览器是否同时支持
文件
和
Blob
。所有主要的都应该这样做

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

步骤1：
您可以从如下（）的
元素中检索
文件
信息：

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

图像/jpeg

图像/png


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


✓ 正确的收割台检查方法

为了获得客户端文件的真正MIME类型，我们可以进一步检查给定文件的前几个字节，以与所谓的MIME进行比较。请注意，这并不是完全直接的，因为，例如，有一些“神奇的数字”。这是因为该格式自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类型，根据需要接受或拒绝文件上载


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

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

屏幕截图




//以十六进制字符串的形式返回文件的前几个字节
函数getBLOBFileHeader（url、blob、回调）{
var fileReader=newfilereader（）；
fileReader.onloadend=函数（e）{
var arr=（新的Uint8Array（e.target.result））.子数组（0,4）；
var header=“”；
对于（变量i=0；i<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>

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

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

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

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

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

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

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

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

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.fromBuffer(bytes);

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