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