应用场景:我要做一个图片上传,并且上传完成之后将略缩图(预览图)展示在页面上。
常规思路:用户点击图片进行上传,将用户提交的图片传到后台并保存好,将图片地址链接返回到页面上,写入<img>标签的src,完成预览。
常规思路存在的问题:1、需要进行一次前后台交互 2、需要生成临时文件,那就要考虑路径问题及临时文件删除问题,这是很麻烦的。
使用base64思路:用户点击图片进行上传,js获取文件,调用自带的js方法将文件转为base64编码,将编码填入<imp>的src,完成预览。
base64思路的优点:不需要前后台交互,效率更高,并且base64是字符串型,更易于后台处理,编码直接存数据库或者再转回文件都可以。
bsae64DEMO:
<input type="file" name="file" id="img_upload_file" multiple="multiple" />
<input type="hidden" name="img_upload_base" id="img_upload_base" />
<label>图片预览</label> <img id="img_upload_show" />
$("#img_upload_file").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供后台使用
};
});