JS 判断文件是否是图片

本贴最后更新于 1860 天前,其中的信息可能已经沧海桑田

JS 判断文件是否为图片,原理就是检测文件的 Magic Number

对 JPEG、GIF、PNG 的 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);
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    635 引用 • 1121 回帖 • 766 关注
  • 图片
    24 引用 • 124 回帖

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    👍 社区会参考这个加入上传时的判断的

  • 88250

    已经用上了,请大家帮忙测试~

  • muyuballs

    @88250 pdf 伪装成 .png 已经不行了

  • 88250

    😄 感觉安全一些了

  • Chan
    var fileInput = document.getElementById('file');
    fileInput[0].files.type.indexOf('png/jpg/xxxx') != 0;
    

    这样也行吧

  • muyuballs

    @Chan 这样就要看浏览器是不是通过后缀名来判断类型了,万一是病毒伪装成.png 呢

请输入回帖内容 ...