+
95
-

回答

可以通过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>


网友回复

我知道答案,我要回答