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

我已经阅读这个问题,这似乎表明,文件的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”,type:“image / png”,size:500055 …}

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

我是否有权说,目前没有办法用javascript检查MIME类型? 还是我错过了什么?

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


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

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

步骤1:

您可以像这样( ref )从<input>元素中检索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": 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 = ["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; } 

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类型的完整列表,请参阅维基百科 。

有关幻数的完整列表,请参阅维基百科 。

简短的回答是没有。

正如你注意到的浏览器从文件扩展名派生type 。 Mac预览也似乎跑了延伸。 我假设它是因为它更快地读取指针中包含的文件名,而不是查阅和读取磁盘上的文件。

我做了一个与png重命名的jpg的副本。

我能够始终如一地从两个图像中获得铬(应该在现代浏览器中工作)。

ÿØÿà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

下面是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> 

这是你必须做的

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

如果你想检查图像文件类型然后

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

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