JQuery将图片转化为Base64数据

 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());
            }
        }
    }

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先说明一下,btoa和atob是JavaScript自带的Base64编码和解码函数,它们的作用是将字符串转换为Base64编码格式或将Base64编码格式的字符串转换为普通字符串。 在JavaScript中,如果要使用btoa函数进行Base64编码,可以这样写: ```javascript var str = "Hello, world!"; var base64 = btoa(str); console.log(base64); // "SGVsbG8sIHdvcmxkIQ==" ``` 如果要使用atob函数进行Base64解码,可以这样写: ```javascript var base64 = "SGVsbG8sIHdvcmxkIQ=="; var str = atob(base64); console.log(str); // "Hello, world!" ``` 在PHP中,可以使用base64_encode和base64_decode函数来对Base64编码和解码。对于上面的例子,可以这样写: ```php $base64 = "SGVsbG8sIHdvcmxkIQ=="; $str = base64_decode($base64); echo $str; // "Hello, world!" ``` 如果要在jQuery中实现前台Base64加密解密功能,可以使用JavaScript自带的btoa和atob函数,也可以使用第三方的Base64库。具体实现可以参考以下代码: ```javascript // 加密 var str = "Hello, world!"; var base64 = btoa(str); console.log(base64); // "SGVsbG8sIHdvcmxkIQ==" // 解密 var base64 = "SGVsbG8sIHdvcmxkIQ=="; var str = atob(base64); console.log(str); // "Hello, world!" // 使用第三方库进行加密解密 var str = "Hello, world!"; var base64 = $.base64.encode(str); console.log(base64); // "SGVsbG8sIHdvcmxkIQ==" var str = $.base64.decode(base64); console.log(str); // "Hello, world!" ``` 需要注意的是,前台Base64加密解密只能防止一些简单的攻击,对于敏感数据仍然需要使用HTTPS等安全协议进行传输。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值