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

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

常规思路：用户点击图片进行上传，将用户提交的图片传到后台并保存好，将图片地址链接返回到页面上，写入<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供后台使用
        }; 
    });