图片上传转base64预览demo及个人解析

应用场景：我要做一个图片上传，并且上传完成之后将略缩图（预览图）展示在页面上。

常规思路：用户点击图片进行上传，将用户提交的图片传到后台并保存好，将图片地址链接返回到页面上，写入标签的src，完成预览。

常规思路存在的问题：1、需要进行一次前后台交互  2、需要生成临时文件，那就要考虑路径问题及临时文件删除问题，这是很麻烦的。

使用base64思路：用户点击图片进行上传，js获取文件，调用自带的js方法将文件转为base64编码，将编码填入的src，完成预览。

base64思路的优点：不需要前后台交互，效率更高，并且base64是字符串型，更易于后台处理，编码直接存数据库或者再转回文件都可以。

bsae64DEMO：

 

图片预览 

$("#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供后台使用
        }; 
    });