图片上传、预览 存到本地

先来前端页面代码

<!-- 账号设置  --><div id="center_right_zhsz" hidden="hidden"><div style="font-family: MicrosoftYaHei;font-size: 14px;"><div style="width: 64px;height: 21px;color: #4d4d4d;font-size: 16px;margin-left: 34px;margin-top: 40px;">基本资料</div><div style="margin-top: 50px;"><div style="width: 28px;height: 19px;color: #7f7f7f;margin-left: 282px;float: left;margin-right: 40px;">头像</div><div style="font-size: 12px;color: #c3c3c3;"><img th:src="@{/static/images/icons/icon-ts.png}" style="margin-bottom: -2px;margin-right: 10px;">仅支持GIF/JPG/PNG格式、大小不超过2M</div></div><div style="height: 100px;margin-left:410px;width: 120px; "><img id="zhsztxxgq" th:src="@{/static/images/icons/touxiang.png}" style="width: 96px;height: 96px;border-radius: 50px;margin-top: 30px;z-index: -1;"><img id="zhsztxxgz" onclick="sctx()" hidden="hidden" th:src="@{/static/images/icons/sctx.png}" style="width: 96px;height: 96px;border-radius: 50px;cursor:pointer;z-index: 0;margin-top: -100px;margin-bottom: 20px;"><input hidden="hidden" id="xtxtp" type="file" accept="image/gif, image/jpg, image/png"/><input id="photoCover" class="form-control" readonly type="text" hidden="hidden"><input id="zhszid" hidden="hidden" value="60"></div><div style="margin-top: 50px;"><div style="margin-left: 282px;margin-right: 100px;float: left;color: #7f7f7f;font-size: 14px;">昵称</div><div id="zhszncdiv" hidden="hidden"><input id="zhsznc2" style="width: 128px;color: #4d4d4d;"/></div><div id="zhsznc" style="color: #4d4d4d;font-size: 14px;">yxzj1991</div></div></div><img id="zhsztxan" onclick="htx()" th:src="@{/static/images/icons/icon-xg.png}" style="position: absolute;top: 540px;left: 940px;cursor: pointer;"><img id="zhszncan" onclick="hnc()" th:src="@{/static/images/icons/icon-xg.png}" style="position: absolute;;top: 585px;left: 940px;cursor: pointer;"><img id="zhszmman" onclick="hmm()" th:src="@{/static/images/icons/icon-xg.png}" style="position: absolute;;top: 925px;left: 940px;cursor: pointer;"><div id="zhsz_tx" hidden="hidden"><img  onclick="htxqx()" th:src="@{/static/images/icons/icon-qx.png}" style="position: absolute;;top: 540px;left: 940px;cursor: pointer;"><img  onclick="htxqr()" th:src="@{/static/images/icons/icon-bc.png}" style="position: absolute;;top: 540px;left: 912px;cursor: pointer;"></div><div id="zhsz_nc" hidden="hidden"><img  onclick="hncqx()" th:src="@{/static/images/icons/icon-qx.png}" style="position: absolute;;top: 585px;left: 940px;cursor: pointer;"><img  onclick="hncqr()" th:src="@{/static/images/icons/icon-bc.png}" style="position: absolute;;top: 585px;left: 912px;cursor: pointer;"></div><div id="zhsz_mm" hidden="hidden"><img  onclick="hmmqx()" th:src="@{/static/images/icons/icon-qx.png}" style="position: absolute;;top: 925px;left: 940px;cursor: pointer;"><img  onclick="hmmqr()" th:src="@{/static/images/icons/icon-bc.png}" style="position: absolute;;top: 925px;left: 912px;cursor: pointer;"></div><div><div style="width: 64px;height: 21px;color: #4d4d4d;font-size: 16px;margin-left: 34px;margin-top: 98px;">账号安全</div><div style="margin-top: 50px;"><div style="margin-left: 282px;margin-right: 72px;color: #7f7f7f;float: left;font-size: 14px;">仓库名称</div><div id="zhszmysmc" style="color: #4d4d4d;font-size: 14px;">石家庄海森化工有限公司</div></div><div style="margin-top: 30px;"><div style="margin-left: 282px;margin-right: 72px;color: #7f7f7f;float: left;font-size: 14px;">身份权限</div><div style="color: #4d4d4d;font-size: 14px;">操作员</div></div><div style="margin-top: 30px;"><div style="margin-left: 282px;margin-right: 72px;color: #7f7f7f;float: left;font-size: 14px;">登录账号</div><div id="zhszzh" style="color: #4d4d4d;font-size: 14px;">1321321322</div></div><div style="margin-top: 30px;"><div style="margin-left: 282px;margin-right: 72px;color: #7f7f7f;float: left;font-size: 14px;">登录密码</div><div id="zhszmm2" style="color: #4d4d4d;font-size: 14px;">••••••••</div><input id="zhszmm" hidden="hidden" value="zhang012345"/></div><div id="zhszmmxgdiv" hidden="hidden"><div style="margin-top: 30px;"><div style="margin-left: 282px;margin-right: 72px;color: #7f7f7f;float: left;font-size: 14px;">新的密码</div><div style="color: #4d4d4d;font-size: 14px;"><input id="zhszxmm" style="width: 128px;"/></div><div style="margin-top: 30px;"><div style="margin-left: 282px;margin-right: 72px;color: #7f7f7f;float: left;font-size: 14px;">确认密码</div><div style="color: #4d4d4d;font-size: 14px;"><input id="zhszxmm2" style="width: 128px;"/></div><span id="mmbyz" hidden="hidden" style="color: #fe4a48;font-size: 12px;margin-left:412px;">两次密码填写不一致</span><span id="mmxt" hidden="hidden" style="color: #fe4a48;font-size: 12px;margin-left:412px;">与旧密码相同，请更改</span></div></div></div></div><div style="margin-top: 50px;"><button onclick="zhsztc()" style="width: 128px;height: 40px;background-color: #74bdff;border-radius: 5px;color: #ffffff;font-size: 16px;border: none;margin-left: 393px;">退出登录</button></div></div>

这是样子

下面的是图片点击事件（点击图片触发 那个隐藏的input的点击事件）

/* 上传头像 */function sctx(){$("#xtxtp").click();} $(function(){     $("#xtxtp").change(function(e){         var file = e.target.files[0]||e.dataTransfer.files[0];         //在此限制图片的大小         var imgSize = file.size;         console.log(imgSize);         //35160  计算机存储数据最为常用的单位是字节(B)         //在此处我们限制图片大小为2M         if(imgSize>2*1024*1024){         alert('上传的图片的大于2M,请重新选择');         $(this).val('')         return false;         }         $('#photoCover').val(document.getElementById("xtxtp").files[0].name);         if(file){             var reader = new FileReader();             reader.onload=function(){                 $("#zhsztxxgz").attr("src", this.result);                // $("#zhsztxxgq").hide();             }             reader.readAsDataURL(file);         }     }); })

到这里只是替换页面上的图片，相当于预览功能。还没投提交到后台

/* 换头像确认 */function htxqr(){if($("#zhsztxxgz")[0].src.split("/")[6]=="sctx.png"){$("#zhsztxan").show();$("#zhsztxxgq").show();$("#zhsztxxgz").hide();$("#zhsz_tx").hide();}else{$("#zhsztxan").show();$("#zhsztxxgq").show();$("#zhsztxxgz").hide();$("#zhsz_tx").hide();$("#zhsztxxgq").attr("src",$("#zhsztxxgz")[0].src);$("#zhsztxxgz").attr("src","/static/images/icons/sctx.png");var file = document.getElementById("xtxtp").files[0];var form = new FormData();form.append("file", file);var xhr = null; //得到xhr对象        if(XMLHttpRequest){            xhr = new XMLHttpRequest();        }else{            xhr = new ActiveXObject("Microsoft.XMLHTTP");        }        xhr.open("post", "warehouseauditor/htx", true);//设置提交方式，url，异步提交        xhr.onload = function ()        {            var data = xhr.responseText;    //得到返回值        }        xhr.send(form);}}

可以看到用了 formData，以前提交图片都是form表单直接提交，不能局部刷新页面，用formData 你可以局部刷新，form表单度都可以不写（貌似是html5才有的）
form.append("file", file);相当于key  value  你有多个参数是也可以一起加的

下面是controller层

/** * 换头像 * @param file * @param id * @param request * @param response */@RequestMapping("htx")public void htx(@RequestParam("file")MultipartFile file,HttpServletRequest request,HttpServletResponse response){ try { PortalUser user =(PortalUser) request.getSession().getAttribute("user"); if(user!=null){ PortalUser entity = portalUserService.getEntity(user.getId()); String fileName=file.getOriginalFilename(); //获取扩展 String extName = fileName.substring(fileName.lastIndexOf("."));//.jpg String nname = fileName.substring(0,fileName.lastIndexOf("."));//w文件名 //UUID String uuid = UUID.randomUUID().toString().replace("-", ""); //新名称 String newName = nname+"-"+uuid+extName; //获取输出流 OutputStream os=new FileOutputStream("D:/photo2/"+newName); //获取输入流 CommonsMultipartFile 中可以直接得到文件的流 InputStream is=file.getInputStream(); int temp; //一个一个字节的读取并写入 while((temp=is.read())!=(-1)) { os.write(temp); } os.flush(); os.close(); is.close(); entity.setPhotoUrl("D:/photo2/"+newName); portalUserService.save(entity); RenderUtil.renderSuccess("修改成功", response); }        } catch (IOException e) {        e.printStackTrace();        }          }

加了个uuid防止重名  不过我是先建好这个photo2这个文件夹的，不然你要加个判断