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

2020/10/20 20:41 · javascript ·  · 0评论

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

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

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

这是我在Chrome 28.0上得到的：

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

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

我是说对了，目前无法用javascript检查MIME类型吗？还是我错过了什么？

您可以使用JavaScript轻松确定文件的MIME类型，FileReader然后再将其上传到服务器。我同意我们应该优先于服务器端检查而不是客户端检查，但是仍然可以进行客户端检查。在底部，我将向您展示如何进行演示。

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

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

第1步：

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

<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类型。

method快速方法

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

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

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

图片/ jpeg

图片/ png

...

注意：从文件扩展名中检测到MIME类型，并且可以对其进行欺骗或欺骗。可以将a重命名.jpg为a .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类型。见下文。

屏幕截图

演示的预期输出

显示代码段

如其他答案所述，您可以通过在文件的第一个字节中检查文件的签名来检查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>

对于任何不想自己实现此功能的人，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.fromBuffer(bytes);

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

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

这就是你要做的

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

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

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

这是一个支持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">

正如Drake所说，可以使用FileReader来完成。但是，我在这里介绍的是功能版本。考虑到使用JavaScript执行此操作的最大问题是重置输入文件。好吧，这仅限于JPG（对于其他格式，您将不得不更改mime类型和幻数）：

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

考虑到此功能已在最新版本的Firefox和Chrome以及IExplore 10上进行了测试。

有关MIME类型的完整列表，请参见Wikipedia。

有关幻数的完整列表，请参见Wikipedia。

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

简短的答案是没有。

如您所见，浏览器源自type文件扩展名。Mac预览版似乎也可以运行该扩展程序。我之所以假设它是因为它可以更快地读取指针中包含的文件名，而不是查找并读取磁盘上的文件。

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

我能够从chrome中的两个图像中始终获得以下信息（应该在现代浏览器中有效）。

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

您可以修改String.indexOf（'jpeg'）检查图像类型。

这是探索http://jsfiddle.net/bamboo/jkZ2v/1/的小提琴

我在示例中忘记评论的歧义词

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

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

小提琴代码使用的base64解码它不会工作在IE9中，我没有使用VB脚本，找到一个很好的例子，在IE的作品http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

加载图片的代码来自Joel Vardy，他在上传之前正在对客户端的图片画布进行大小调整，这可能很有趣https://joelvardy.com/writing/javascript-image-upload

本文地址：http://javascript.askforanswer.com/shangchuanqianruheshiyongjavascriptjianchawenjianmimeleixing.html
文章标签： ,   ,   ,  
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载

老薛主机终身7折优惠码boke112

上一篇：
下一篇：

评论已关闭！