前端上传图片预览

背景 ：之前在工作上实现一个角色上传头像的功能，但是还要实现上传头像预览  

 

内容 ： 不说那么多 直接上代码  这次实现是直接用js实现的  没有真正的上传

 

/** 页面 */

<img id="img0" style="max-height:150px; max-width:150px;" src="${userEntity.headPortraitPath}">

<input class="form-control" accept="image/png,image/jpeg,image/gif" name="imgFile" id="imgFile" type="file" value="${userEntity.headPortraitPath }" placeholder="头像..."/>

 

 

 

/** 头像预览 JS  */

$("#imgFile").change(function(){ 

     var objUrl = getObjectURL(this.files[0]) ;//获取文件信息 

      if (objUrl) { 

      $("#img0").attr("src", objUrl); 

     }  

}) ; 

function getObjectURL(file) { 

     var url = null;  

        if (window.createObjectURL!=undefined) { 

            url = window.createObjectURL(file) ; 

        } else if (window.URL!=undefined) { // mozilla(firefox) 

            url = window.URL.createObjectURL(file) ; 

        } else if (window.webkitURL!=undefined) { // webkit or chrome 

            url = window.webkitURL.createObjectURL(file) ; 

        } 

     return url ; 

}