[英]How to check file MIME type with JavaScript before upload?
我已經閱讀了這個和這個問題，這似乎表明可以在客戶端使用 JavaScript 檢查文件 MIME 類型。 現在，我知道真正的驗證仍然必須在服務器端完成。 我想執行客戶端檢查以避免不必要的服務器資源浪費。
為了測試這是否可以在客戶端完成，我將JPEG測試文件的擴展名更改為.png並選擇要上傳的文件。 在發送文件之前，我使用 JavaScript 控制台查詢文件對象：
document.getElementsByTagName('input')[0].files[0];
這是我在 Chrome 28.0 上得到的：
文件 {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 類型。 我同意我們應該更喜歡服務器端檢查而不是客戶端檢查，但客戶端檢查仍然是可能的。 我將向您展示如何操作並在底部提供一個工作演示。
檢查您的瀏覽器是否同時支持File和Blob 。 所有主要的都應該。
if (window.FileReader && window.Blob) {
// All the File APIs are supported.
} else {
// File and Blob are not supported
}
您可以像這樣 ( 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>
我們現在可以檢查文件並梳理出標題和 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 類型（更多文件簽名here和here ）：
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/>
如其他答案所述，您可以通過檢查文件第一個字節中的文件簽名來檢查 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 上測試的。
我需要檢查更多的文件類型。
遵循Drakes給出的出色答案，在我發現這個網站有一個非常廣泛的文件類型及其標題表后，我想出了下面的代碼。 十六進制和字符串。
我還需要一個異步函數來處理與我正在工作的項目相關的許多文件和其他問題，這些問題在這里無關緊要。
這是香草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, async file => {
console.log(file.name, await getFileMimeType(file));
});
};
請注意，在 getFileMimeType 函數中，您可以使用 2 種方法來查找正確的 MIME 類型。
我對 JPEG 使用了第一種方法，因為使其可識別的是前 2 個字節，而這些字節不是可讀的字符串字符。
對於其他文件類型，我可以檢查可讀的字符串字符簽名。 例如：[video/mp4] -> 'ftypmp4' 或 'ftypisom'
如果您需要支持不在 Gary Kessler 列表中的文件，您可以 console.log() 字節或轉換后的字符串為您需要支持的晦澀文件找到適當的簽名。
Note1: Gary Kessler 的列表已經更新，現在 mp4 簽名不同了，你應該在實現時檢查它。 注意 2：Array.from 旨在使用類似 .map 的函數作為第二個參數。
這是 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>
這是瀏覽器的最小打字稿/承諾工具；
export const getFileHeader = (file: File): Promise<string> => {
return new Promise(resolve => {
const headerBytes = file.slice(0, 4); // Read the first 4 bytes of the file
const fileReader = new FileReader();
fileReader.onloadend = (e: ProgressEvent<FileReader>) => {
const arr = new Uint8Array(e?.target?.result as ArrayBufferLike).subarray(
0,
4,
);
let header = '';
for (let i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
resolve(header);
};
fileReader.readAsArrayBuffer(headerBytes);
});
};
在您的驗證中像這樣使用（我需要一個 PDF 檢查）；
// https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
const pdfBytePattern = "25504446"
const fileHeader = await getFileHeader(file)
const isPdf = fileHeader === pdfBytePattern // => true
對於 Png 文件，您可以進行更多檢查，而不僅僅是檢查一些魔術頭字節，因為 Png 文件具有您可以檢查的特定文件格式。
TLDR：有一系列必須按特定順序排列的塊，每個塊都有一個 crc 糾錯碼，您可以檢查它是否有效。
https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_format
我制作了一個小庫來檢查塊布局是否正確，並檢查每個塊的 crc 代碼是否有效。 准備在這里作為 npm 包使用：
簡短的回答是否定的。
正如您所注意到的，瀏覽器從文件擴展名派生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] )) );
小提琴代碼使用在 IE9 中不起作用的 base64 解碼，我確實找到了一個很好的例子，使用在 IE 中工作的 VB 腳本http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html
加載圖像的代碼取自 Joel Vardy，他在上傳之前正在做一些很酷的圖像畫布調整客戶端大小，這可能很有趣https://joelvardy.com/writing/javascript-image-upload
更改擴展名后，在上傳文件之前檢查jquery中的Mime Type
[英]Check Mime Type in jquery before file upload after changing the Extension
MIME類型檢查無法用於文件上傳？ （特別是，使用Javascript File API）？
[英]MIME type check useless for file upload? (in particular, using the Javascript File API)?
在上傳之前，請使用FileReader javascript檢查圖像的mime類型
[英]Check an image mime type with FileReader javascript before uploading that
在所有輸入類型=“ file”上載之前，如何附加事件以檢查文件大小？
[英]How to attach an event to check the file size before upload on all input type=“file”?
如何在jsp中使用javascript對文件MIME類型進行驗證
[英]how to do validation for file MIME type using with javascript in jsp
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.