上传图片检验类型并预览

<!DOCTYPE html>
<html>
<head>
    <title>上传图片检验类型并预览</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <h3>请选择图片文件：PNG/JPG/JPEG/BMP/GIF</h3>
    <form name="form0" id="form0">
        <input type="file" name="file0" id="file0" accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp" /><br>
        <img src="" id="img0" style="width: 20rem;height: 15rem;">
    </form>
    <script type="text/javascript">
        $("#file0").change(function () {

            isPicture(this.files[0]).then(res => {
                if (res) {
                    var objUrl = getObjectURL(this.files[0]);//获取文件信息
                    if (objUrl) {
                        $("#img0").attr("src", objUrl);
                    }
                } else {
                    alert("请上传图片");
                    $("#img0").attr("src", "");
                    this.value = '';
                }
            }).catch(err => {
                console.log(err)
            });
        });

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        //是否为 PNG/JPG/JPEG/BMP/GIF 类型的图片文件
        async function isPicture(file) {
            return await isPng(file) || await isJpg(file) || await isBmp(file) || await isGif(file);
        }
        //是否PNG图片
        async function isPng(file) {
            const ret = await blobToHex(file.slice(0, 8))
            const png = ret === '89 50 4E 47 0D 0A 1A 0A'
            return png;
        }
        //是否JPG图片
        async function isJpg(file) {
            const len = file.size
            const start = await blobToHex(file.slice(0, 2))
            const tail = await blobToHex(file.slice(-2, len))
            const jpg = start === 'FF D8' && tail === 'FF D9'
            return jpg;
        }
        //是否Gif图片
        async function isGif(file) {
            const ret = await blobToHex(file.slice(0, 6))
            //因为图片规范有89年和87年两个版本 所以判断两个
            const gif = (ret === '47 49 46 38 37 61') || (ret === '47 49 46 38 39 61')
            return gif;
        }
        //是否Bmp图片
        async function isBmp(file) {
            const ret = await blobToHex(file.slice(0, 2))
            const bmp = ret === '42 4D'
            return bmp;
        }
        //ArrayBuffer 转 Hex
        function arrayBuffer2Hex(buffer) { // buffer is an ArrayBuffer
            return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2).toUpperCase()).join(' ');
        }
        //blob 转 hex
        function blobToHex(blob) {
            return new Promise(resolve => {
                var reader = new FileReader();
                reader.onload = function (event) {
                    let content = arrayBuffer2Hex(reader.result);//内容就在这里
                    resolve(content);
                };
                reader.readAsArrayBuffer(blob);
            });
        }
    </script>
</body>
</html>
你可能也喜欢

我来吐槽
