File 控件选中文件图片后 ，转为实际路径 显示在页面上

一般系统中很多图片相关功能。打比方(用户更换头像)

多数实现方式都是 选择图片了就直接请求upload接口，保存到服务器然后返回图片url路径，前端使用http显示图片；

 

我个人感觉这样不好。因为用户更换头像可能会选择好多次图片，每选择一次都请求接口保存吗？

那这样用户可能会上传很多无效图片，其实只有最后点保存的一张才是有用的。

所以只需要最后点保存请求一次接口就行了。前面选择图片就使用js转为base64路径，然后显示界面上

 

$("#upLoad").change(function () {   File每次选中文件

            var file = document.getElementById('upLoad').files[0]; //你的input的标签       

            var oFReader = new FileReader();

            oFReader.readAsDataURL(file);           

         oFReader.onloadend = function (oFRevent) {      

           var src = oFRevent.target.result;        

         $('.entry').css("background", "url(" + src + ")");     

        }

})