JQuery将图片转化为Base64数据

最新推荐文章于 2024-07-28 02:33:01 发布

花生壳儿

最新推荐文章于 2024-07-28 02:33:01 发布

阅读量3k

点赞数 1

分类专栏：前端随笔文章标签： java javascript

本文链接：https://blog.csdn.net/csdn_db96/article/details/112040816

版权

前端随笔专栏收录该内容

5 篇文章

订阅专栏

HTML代码

<input type="file" id="file" name="file" multiple="multiple"/>

<img class="userPhoto" src="resources/images/logo.jpg" alt="点击上传照片">

JQuery代码:

    // 图片文件绑定事件
    $("#file").change(function () {
        img2Base64(this, function (data) {
            $('.userPhoto').attr('src', data);
        });
    });

    // 将图片文件转化为Base64
    function img2Base64(input_file, get_data) {
        /*input_file：文件按钮对象*/
        /*get_data: 转换成功后执行的方法*/
        if (typeof (FileReader) === 'undefined') {
            console.log("图片异常")
        } else {
            try {
                /*图片转Base64 核心代码*/
                var file = input_file.files[0];
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if (!/image\/\w+/.test(file.type)) {
                    console.log("图片img2base64：转化成功");
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function () {
                    get_data(this.result);
                }
                reader.readAsDataURL(file);
            } catch (e) {
                console.log("图片img2base64：转化失败")
                console.log(local_message.E_CODE_0008 + e.toString());
            }
        }
    }