jQuery上传base64格式文件到后台和从后台读取base64格式文件(字符串形式传输)

html:

					<div>
                        <div id="div_show_img">
                            <img id="show_img"/>
                        </div>
                        <div id="upload_button">上传图片</div>
                        <input type="file" id="input_file_name">    
                    </div>

js:

	//这两个click事件可有可无
	$("#upload_button").click(function(){
        $("#input_file_name").trigger("click");/*当用户点击“上传图片”按钮时,模拟用户点击了input*/
    })
    $("#div_show_img").click(function(){
        $("#input_file_name").trigger("click");/*当用户点击image时,模拟用户点击了input*/
    })
    var img_string="";//设置全局变量,在ajax传给后台时data里传img_string
    $('#input_file_name').change(function () {
        var file = this.files[0];//选中的文件
        var fr = new FileReader();//读流
        fr.readAsDataURL(file);//读文件
        fr.onload = function(){
            img_string=fr.result;
            $("#show_img").attr("src",fr.result);//这里的fr.result就是base64格式的文件,在img标签内显示base64格式的文件
            $("#show_img").css("width",100);
            $("#show_img").css("height",120);
        }    
    });

console.log(fr.result);的结果,即fr.result大概长这样:
在这里插入图片描述
上传是base64格式,下载也是base64格式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值