头像修改功能的实现
- 介绍
本文编写了前端和后端，一起实现了上传图片同步显示并且通过后端保存图片到本地目录。 - 前端修改图片按钮样式
功能实现：首先设置原本的文件选择器不显示，也就是display：none；然后写下图片img标签，定义图片的大小，加一个点击事件，点击后执行隐藏了的图片选择器的功能，最后设置一个图标，在图片上面，编写事件，当时鼠标在图片内的时候，图标显示，不在的时候，隐藏，另外还要编写一个开启页面，默认图标隐藏的方法，因为刚打开页面的时候，浏览器会默认显示图标（可能是浏览器默认鼠标开始在图片内）。
展示效果：
点击图片后（鼠标移动到头像上，会自动出现一个修改的图标在头像上，点击后，会弹出本地的文件，自己选择图片上传）
代码如下
<div class="imgcontent" ><input type="file" class="file" name="file" style="display: none;"/><span id="img"><img src="img/login.jpeg" id="uimg" class="img" width="50px"height="50px" οnclick="javascript:$('.file').click();"/></span><span class="glyphicon glyphicon-pencil" id="upd"style="position: relative;top: -36px;left: 16px;font-size: 20px;" οnclick="javascript:$('.file').click();"></span></div>
//选择图片随后同步显示$('.file').change(function (e){var imgurl = window.URL || window.webkitURL;var file,img;if(file = this.files[0]){img = new Image();img.onload = function(){$('.img').attr('src',this.src);}img.src = imgurl.createObjectURL(file);}})//默认隐藏window.onload = function(){$('#upd').hide();}//鼠标移出隐藏$('.imgcontent').mouseout(function(){$('#upd').hide();})//鼠标移入显示$('.imgcontent').mouseover(function(){$('#upd').show();}) - 后台存储图片信息
功能实现：
本文是使用表单来点击确认修改后，上传图片，后台需要使用到java中的File类，以及FileOutputStream写入图片。首先，我们需要在前端的form标签中写下enctype=“multipart/form-data” enctype是指编码类型，multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据，然后在controller层的提交方法中传入参数 @RequestParam(value = “file”) MultipartFile file，具体的解释看代码注释部分。
功能展示（点击图片，弹出文件夹，选择图片）：
选择完后
点击修改（后台输出图片名字以及存储后的位置）
查看该目录是否成功保存图片
成功！！
代码
前端代码与上面的差不多，因此不重复放了
后端代码如下
@RequestMapping("/img")public String myimg(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) throws IOException {//获取文件名称String fileOrigName = file.getOriginalFilename();System.out.println(fileOrigName);//设置文件存储路径String filepath = "D:/idea/blog/src/main/resources/static/imgfile/"+fileOrigName;try{File targetFile = new File(filepath);if(targetFile.exists()){//判断该文件是否存在System.out.println("exists!!!");return "/img";}//判断文件目录是否存在if(!targetFile.getParentFile().exists()){//文件路径不存在就创建路径targetFile.getParentFile().mkdirs();System.out.println("mkdir file");}try {if (!targetFile.exists()){//再次判断,写入文件targetFile.createNewFile();FileOutputStream outputStream = new FileOutputStream(targetFile);byte[] bytes = file.getBytes();outputStream.write(bytes);outputStream.close();}else{System.out.println("img is exists!!!");}System.out.println(filepath);}catch (IOException e){e.printStackTrace();}return "/img";}catch (Exception e) {e.printStackTrace();}return "/img";}
