我读了这个和这个问题，似乎表明文件MIME类型可以在客户端使用JavaScript检查。现在，我知道真正的验证仍然必须在服务器端完成。我想执行客户端检查，以避免不必要的服务器资源浪费。
为了测试这是否可以在客户端完成，我将一个JPEG测试文件的扩展名更改为.png，并选择该文件进行上传。在发送文件之前，我使用JavaScript控制台查询文件对象:
document.getElementsByTagName('input')[0].files[0];
这是我在Chrome 28.0上得到的:
文件{webkitRelativePath: ""， lastModifiedDate: Tue Oct 16 2012
10:00:00 GMT+0000 (UTC)，名称:“test.png”，类型:“image/png”，大小:
500055年…}
它显示的类型为image/png，这似乎表明检查是基于文件扩展名而不是MIME类型。我尝试了火狐22.0，它给了我同样的结果。但是根据W3C规范，应该实现MIME嗅探。
我是正确的说，没有办法检查MIME类型与JavaScript的时刻?还是我遗漏了什么?
我需要检查更多的文件类型。
遵循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函数中，您可以使用两种方法来查找正确的MIME类型。
直接搜索字节。
在将字节转换为字符串后搜索字符串。
我对JPEG使用第一种方法，因为使其可识别的是前两个字节，而这些字节不是可读的字符串字符。
对于其余的文件类型，我可以检查可读的字符串字符签名。例如:
[视频/mp4] -> 'ftypmp4'或'ftypisom'
如果需要支持不在Gary Kessler列表中的文件，可以console.log()字节或转换后的字符串，为需要支持的模糊文件找到合适的签名。
注1:Gary Kessler的列表已经更新，现在mp4签名有所不同，您应该在实现时检查它。
注意2:Array.from被设计成使用类似.map的函数作为第二个参数。
简短的回答是否定的。
正如您所注意到的，浏览器从文件扩展名派生类型。Mac预览似乎也运行了扩展。我假设这是因为它更快地读取包含在指针中的文件名，而不是查找和读取磁盘上的文件。
我复制了一个重命名为png的jpg文件。
我能够始终如一地从chrome中的两个图像中获得以下内容(应该在现代浏览器中工作)。
ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0(使用IJG JPEG v62)，质量= 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>
正如在其他答案中所述，您可以通过检查文件的第一个字节中的文件签名来检查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>
