可以通过js二进制读取文件的头部4个字节来判断文件的mime类型,具体代码如下:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="file" id="fileInput">
<div id="output"></div>
<script type="text/javascript">
function loadMime(file, callback) {
//已知文件mine类型标识
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],
}
// 更多扩展的mine标识请看这个e 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); //读取文件的头部4个字节
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);
}
fileInput.onchange = function() {
loadMime(fileInput.files[0], function(mime) {
output.innerHTML = mime;
});
};
</script>
</body>
</html>
网友回复