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格式

猜你喜欢

转载自blog.csdn.net/weixin_44575911/article/details/111247173