之前一个已经工作的同学问我上传图片立即显示怎么实现，这个问题虽然不难，但我还是要去打开电脑找到项目，点开一个个目录；这时候博客的作用就显露出来了。。
话不多说，进入正题：
先看看效果
只需要在js中添加如下代码就可以实现了
$(function(){ ??????????????$("#clickHeadImage").click(function(){ ??????????????????$(this).find(‘span‘).removeClass(‘ui-state-hover‘); ?????????????????//file绑定click，onchange事件，单击事件打开file，选择后触发onchange，再调用单击事件触发sumit ??????????????????document.getElementById("userImg").click(); ???????????????????document.getElementById("userImg").onchange=function(evt){ ???????????????????????// document.getElementById("submit").click(); ????????????????????????var image = ‘‘; ??????????????????????????var files = evt.target.files; ????????????????????????var file=files[0]; ???????????????????????//function selImage(file){ ????????????????????????????????????????????????????????var reader = new FileReader(); ?????????????????????????????reader.onload = function(evt){ ?????????????????????????????????document.getElementById(‘img‘).src = evt.target.result; ?????????????????????????????????image = evt.target.result; ??????????????????????????????????????????????????????????????????var value = $(‘#userImg‘).val(); ?????????????????????????????????value = value.split("\\")[2]; ???????????????????????????????????????????????????????????????image = JSON.stringify(image); ??????????????????????????????// alert(image); ???????????????????????????????????????????????????????????????$.ajax({ ?????????????????????????????????????type:‘POST‘, ?????????????????????????????????????url: ‘user/uploadImg‘, ?????????????????????????????????????data: {base64: image,fileName:value}, ?????????????????????????????????????async: true, ?????????????????????????????????????dataType: ‘text‘, ?????????????????????????????????????success: function(data){ ?????????????????????????????????????????if(data==success){ ?????????????????????????????????????????????alert(‘上传成功‘); ?????????????????????????????????????????}else{ ?????????????????????????????????????????????alert(‘上传失败‘); ?????????????????????????????????????????} ?????????????????????????????????????}, error: function(err){ ?????????????????????????????????????????//alert(err); ???????????????????????????????????????alert(‘网络故障‘); ?????????????????????????????????????} ?????????????????????????????????}); ??????????????????????????????????????????????????????????????}; ?????????????????????????????reader.readAsDataURL(file); ???????????????????????// ?} ????????????????????} ???????????????}); ?????????????????????????????$("#clickHeadImage").hover(function(){ ??????????????????$(this).removeClass(‘ui-state-hover‘); ??????????????}); ?
});这段代码主要是读取你选中的图片文件，先生成图片，然后再把生成的文件以base64方式传递给后台,具体流程可以按F12调试一下就知道了
圆形图片框div：
??????<div id="clickHeadImage" class="head-img" title="点击更换头像"> ???????????<form ?id="form" name="form" method="post" action="user/" enctype="multipart/from-data" > ?????????????????<img id="img" src="${user.userimg }" alt="" style="width:88px;height:88px;z-index:0;"/> ???????????????????<!-- 让头像框为圆形，注释为方形 ????????class="ui-fileupload" 隐藏文件框--> ??????????????????<i class="headframe" style="z-index:0;"></i> ??????????????????<input type="file" class="ui-fileupload" id="userImg" name="userimg" style="z-index:0;display:none;"/> ???????????</form> ??????</div>后台保存代码：
//头像上传 ???@SystemControllerLog(description="头像上传") ???@RequestMapping("uploadImg") ???@ResponseBody ????public String uploadImg(User user,String base64,String fileName,HttpServletRequest request,HttpSession session) { ???????// 去掉base64数据头部data:image/png;base64,和尾部的” " “ ?????????String[] ww= base64.split(","); ?????????base64 = ww[1]; ?????????String[] aa = base64.split("\""); ?????????base64 = aa[0]; ?????????try { ?????????????User u=(User) session.getAttribute("user"); ???????????????????????//图片保存到本地 ?????????????//String url="upload/userImg/"+fileName; ???????????String url="F:\\tomcat\\apache-tomcat-9.0.0.M22\\webapps\\update\\"+fileName; ???????????//String path=request.getSession().getServletContext().getRealPath(url); ?????????????Base64File file = new Base64File(); ?????????????file.decoderBase64File(base64, url); ????????????????????????//将图片插入数据库 ?????????????????????????user.setId(u.getId()); ???????????user.setUserimg("/update/"+fileName); ???????????userService.update(user); ???????????????????????????????????//更新之后，把session移除再添加，前台el表达式才能获取更新数据 ??????????u.setUserimg(user.getUserimg()); ?????????????????????session.removeAttribute("user"); ??????????session.setAttribute("user", u); ???????????// ????成功标识 ?????????????return "success"; ?????????} catch (Exception e) { ?????????????return "nosuccess"; ?????????} ?????}特别要注意的是：如果上传的是png格式的图片，虽然可以立即显示，但在后台有可能会出现base为空的情况，可能是和图片大小有关？不过最好不要选png图片
上传图片立即显示
原文地址：https://www.cnblogs.com/hatsuyuki/p/9029405.html