我读了这个和这个问题，似乎表明文件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的时刻?还是我遗漏了什么?
这是一个最小的typescript/promise util浏览器;
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
以下是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>
正如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类型的完整列表，请参阅维基百科。
有关魔法数字的完整列表，请参阅维基百科。
这是一个最小的typescript/promise util浏览器;
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
对于那些不希望自己实现这个功能的人来说，Sindresorhus创建了一个在浏览器中工作的实用程序，并为您想要的大多数文档提供了头到mime的映射。
https://github.com/sindresorhus/file-type
你可以结合受害者。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);
