原理:检测文件的 Magic Number
代码示例：
var pngMagic = [
0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a
];
var jpeg_jfif = [
0x4a, 0x46, 0x49, 0x46
];
var jpeg_exif = [
0x45, 0x78, 0x69, 0x66
];
var jpegMagic = [
0xFF, 0xD8, 0xFF, 0xE0
];
var gifMagic0 = [
0x47, 0x49, 0x46, 0x38, 0x37, 0x61
];
var getGifMagic1 = [
0x47, 0x49, 0x46, 0x38, 0x39, 0x61
];
function arraycopy(src, index, dist, distIndex, size) {
for (i = 0; i < size; i++) {
dist[distIndex + i] = src[index + i]
}
}
function arrayEquals(arr1, arr2) {
console.log(arr1)
console.log(arr2)
if (arr1 == 'undefined' || arr2 == 'undefined') {
return false
}
if (arr1 instanceof Array && arr2 instanceof Array) {
if (arr1.length != arr2.length) {
return false
}
for (i = 0; i < arr1.length; i++) {
if (arr1[i] != arr2[i]) {
return false
}
}
return true
}
return false;
}
function isImage(buf) {
if (buf == null || buf == 'undefined' || buf.length < 8) {
return null;
}
var bytes = [];
arraycopy(buf, 0, bytes, 0, 6);
if (isGif(bytes)) {
return "image/gif";
}
bytes = [];
arraycopy(buf, 6, bytes, 0, 4);
if (isJpeg(bytes)) {
return "image/jpeg";
}
bytes = [];
arraycopy(buf, 0, bytes, 0, 8);
if (isPng(bytes)) {
return "image/png";
}
return null;
}
/**
* @param data first 6 bytes of file
* @return gif image file true,other false
*/
function isGif(data) {
console.log('GIF')
return arrayEquals(data, gifMagic0) || arrayEquals(data, getGifMagic1);
}
/**
* @param data first 4 bytes of file
* @return jpeg image file true,other false
*/
function isJpeg(data) {
console.log('JPEG')
return arrayEquals(data, jpegMagic) || arrayEquals(data, jpeg_jfif) || arrayEquals(data, jpeg_exif);
}
/**
* @param data first 8 bytes of file
* @return png image file true,other false
*/
function isPng(data) {
console.log('PNG')
return arrayEquals(data, pngMagic);
}
HTML中使用示例
function handleFileSelect(evt) {
var files = evt.target.files;
if (files[0]) {
var reader = new FileReader();
reader.onload = fileLoaded;
//读取文件为ArrayBuffer
reader.readAsArrayBuffer(files[0]);
}
}
function fileLoaded(evt) {
//取前11Bytes转换成Uint8Array
var fileBuf = new Uint8Array(evt.target.result.slice(0, 11));
//调用之前的方法判断是不是图片
//如果不是返回null，否则返回mimeType
var mime = isImage(fileBuf);
alert(mime)
}
//对 input 注册change 事件监听
var fileInput = document.getElementById('file');
fileInput.addEventListener('change', handleFileSelect, false);