jQuery uploads base64 format files to the background and reads base64 format files from the background (transmission in string format)

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

The result of console.log(fr.result);, that is, fr.result is roughly like this:
Insert picture description here
upload is in base64 format, download is also in base64 format

Guess you like

Origin blog.csdn.net/weixin_44575911/article/details/111247173