头像修改功能的实现

头像修改功能的实现

1. 介绍
   本文编写了前端和后端，一起实现了上传图片同步显示并且通过后端保存图片到本地目录。
2. 前端修改图片按钮样式
   功能实现：首先设置原本的文件选择器不显示，也就是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();
	})	
		

2. 后台存储图片信息
   功能实现：
   本文是使用表单来点击确认修改后，上传图片，后台需要使用到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";
    }