第五天:jQuery实现图片转base64及上传

有的试题是带有图片的,需要实现图片上传功能。考虑到试题中使用图片的并不多,因此,决定将图片转成Base64形式并以BLOB类型保存到数据库中。

(一)准备

  • 在试题表增加image列,BLOB类型
  • 下载jquery-2.2.3.min.js,放到js目录下

(二)开发

JS代码:

$(function(){
        $("#img_upload_file1").change(function() {  
                var file = this.files[0];  
                var reader = new FileReader();  
                reader.readAsDataURL(file);//调用自带方法进行转换  
                reader.onload = function(e) {  
                    $("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览  
                    $("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用  
                    // alert(this.result);
                    var img=$("#img_upload_base").val();
                    // var imgType=img.Substring(0,i)
            
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值