本文共 3300 字，大约阅读时间需要 11 分钟。

最近做了一个网站：，实现了一个小功能-头像修改，记录一下实现过程。

说来有点惭愧，这js代码是抄袭的...而且忘了从哪抄的了。

实现效果：

提交后

抄袭的也要厚着脸皮说是我凭本事抄的：抄袭不问出处...

1.clear()代码是为了添加一个图片后，不满意再继续换，需要先清除之前的<input>再添加新的<input>来实现。

2.插件我看不懂，这东西没接触过(  ′  д｀ )…彡…彡

3.后台操作讲解：（我透，这也是抄的...）

    1.上传文件，

    2.验证文件类型，可以参考：

    我直接根据后缀名验证的，虽然在js代码中已经筛选了不是图片的上传文件(file.type.match(imageType))，但是还是需要验证。可是我后台这种只处理后缀名的办法非常不可靠，等有机会了会重写一下。

    3.然后生成文件路径:filepath\token.文件类型,保存到文件中。

    4.将文件路径保存到数据库中。

4.获取图片的后台操作：

见代码，很简单。

    
               
个人信息：
    
        用户名：            
    性别：    
    个性签名：    
我的头像:
   
    
    
             
      
                   
                选择新头像：            
                   
                
        
 
          
          
         
 
         
 
        
            
              
         
    
   

@ResponseBody    @PostMapping(value = "/imageUpload")    public String saveImage(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request){        String filepath="/root/image/";        if (file.isEmpty()) {            System.out.println("文件为空空");            return "文件为空空";        }        Cookie[] cookies = request.getCookies();        if (cookies != null) {            // 遍历数组            for (Cookie cookie : cookies) {                //如果有token                if (cookie.getName().equals("token")) {                    // 取出cookie的值                    String value = cookie.getValue();                    //如果accesstoken不为空的话                    //生成文件路径                    String fileName = file.getOriginalFilename();  // 文件名                    //后缀名                    String suffixName = fileName.substring(fileName.lastIndexOf("."));                    if (!".jpg".equals(suffixName) && !".jpeg".equals(suffixName) && !".png".equals(suffixName) && !".bmp".equals(suffixName)                            && !".gif".equals(suffixName)) {                        return "上传失败:无效图片文件类型";                    }                    long fileSize = file.getSize();                    if(fileSize>1024*500){                        return "图片过大";                    }                    filepath=filepath+value+suffixName;                    File dest = new File(filepath);                    if (!dest.getParentFile().exists()) {                        dest.getParentFile().mkdirs();                    }                    try {                        file.transferTo(dest);                    } catch (IOException e) {                        e.printStackTrace();                    }                    //修改数据库                    String iconUrl="/imageGet/"+value+suffixName;                    usrService.updateIcon(iconUrl,value);                    break;                }            }        }        return "success";    }

从文件系统中读取文件。

@RequestMapping(value = "/imageGet/{name}",produces = MediaType.IMAGE_JPEG_VALUE)    @ResponseBody    public byte[] getImage(/*@PathVariable("place")String place,*/                           @PathVariable("name")String name){        String filepath="/root/image/";        File file = new File(filepath+name);        FileInputStream inputStream = null;        byte[] bytes =null;        try {            inputStream = new FileInputStream(file);            bytes = new byte[inputStream.available()];            inputStream.read(bytes, 0, inputStream.available());        } catch (IOException e) {            e.printStackTrace();        }        return bytes;    }

转载地址：http://jfihn.baihongyu.com/