前言：

  我们在设计自己的网站的时候，一定会遇到上传图片的功能，比如：用户头像，商品图片。
  这篇文章将带着大家设计一个可以使用的图片上传功能，请大家一步一步来，让我们在码路上越走越远。

前端：

组件引入

前端我们使用element-ui的组件。我这里以html加js的方式
1：引入vue.js，axios.js，element-ui。

<script src="../static/js/util/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

基础文件上传

2：element-ui中有多个例子，我们使用其中一个：

<el-upload
  class="avatar-uploader"
  action="/Manage/upBusinessImage"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

上面是element-ui中的一个例子。我将会对其中的各个参数进行讲解。
其中的样式，我们不进行讲解，直接复制就可以。
el-upload中的参数：
action：后面是接口url,图片文件将会发送到该接口中。
:show-file-list：是否显示上传的图片列表
:on-success：上传成功后要执行的操作，“：”代表与js代码进行了绑定。
:before-upload：上传之前要执行的操作，比如检验是否是图片文件，图片的大小是否符合要求等。

  在它的一个函数中使用了URL.createObjectURL(file.raw);方法，这个地方要注意：elementUI中，自带的方法中的file，并不是指图片本身，而是他的一个dom。如果要是拿他的图片，就要用file.raw。

自定义上传方法

  通过上面的方式就可以将图片文件发送给后端，但是，这个只是基础的功能，往往我们的业务不会如此简单，比如：我们可能将商品id,等信息一同发送后端，以保证后端确定图片的作用。此时上面的方式就满足不了我们的需求了。
  为此我们需要设计自己的上传方法。于是改造过程：
1：action后面的路径改为空：action=""
2：添加属性:http-request，后面跟自定义的方法名，例如：:http-request=“uploader”
3：在js中书写自定义方法“uploader”

async uploader(params){

            let file = params.file;
            let clothesId;
            let styleId;
            let imgUrl;
            clothesId = this.goodsModify.goodsId;
            styleId = this.goodsModify.styleId;
            imgUrl = this.goodsModify.goodsImg
            formData = new FormData();
            formData.append('file', file);
            formData.append('clothesId',clothesId);
            formData.append('styleId',styleId);
            formData.append('imgUrl',imgUrl);
            let data = await axios.post("/Manage/upBusinessImage",formData)
        },

  说明一下如果要传递的是多个参数，则必须把多个参数整理成formData的形式进行发送。而到后端则需要用@RequestParam注解标识进行接收。

后端：

需要引入的jar包：

<dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.11.0</version>
</dependency>

基础文件上传

Controller层：

@RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST)
    public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file) {
        return fileService.uploadImage(file,"D:/img/HeadImages/");
    }

  因为只传递了文件，所以只需要一个MultipartFile类型的file接收就可以了。

server层：

//上传操作
    private CommonResultVo uploadImage(MultipartFile file,String folder){
        if (file == null) {
            return CommonResultVoUtil.error("请选择要上传的图片");
        }
        if (file.getSize() > 1024 * 1024 * 10) {
            return CommonResultVoUtil.error("文件大小不能大于10M");
        }
        //获取文件后缀
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1, file.getOriginalFilename().length());
        if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
            return CommonResultVoUtil.error("请选择jpg,jpeg,gif,png格式的图片");
        }
        String savePath = folder;
        File savePathFile = new File(savePath);
        if (!savePathFile.exists()) {
            //若不存在该目录，则创建目录
            savePathFile.mkdir();
        }
        //通过UUID生成唯一文件名
        String filename = UUID.randomUUID().toString().replaceAll("-","") + "." + suffix;
        try {
            //将文件保存指定目录
            //file.transferTo(new File(savePath + filename));
            //File file1 = new File(file.getOriginalFilename());
            FileUtils.copyInputStreamToFile(file.getInputStream(),new File(savePath + filename));
        } catch (Exception e) {
            e.printStackTrace();
            return CommonResultVoUtil.error("保存文件异常");
        }
        //返回文件名称
        return CommonResultVoUtil.successWithData(filename,1);
    }

  代码里的CommonResultVoUtil是我自定义的结果工具类，大家可以根据自己的需求自己构建，也可直接返回字符串成功或者失败。

自定义的多参数接口

与上面的区别只是多使用了几个参数：

@RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST)
    public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file,
                                              @RequestParam(value = "clothesId", required = false) String clothesId,
                                              @RequestParam(value = "styleId", required = false) String styleId,
                                              @RequestParam(value = "imgUrl", required = false) String imgUrl) {
        return fileService.uploadBusinessImage(file,clothesId,styleId,imgUrl);
    }

拿到这些参数后可以根据某些参数去定位数据库中的某条记录，然后将图片位置保存入数据库中，以便后续访问。

1、前端html

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">身份证正面照片:</label>
    <div class="col-sm-10">
    <input type="hidden" name="img"  id="photoUrl"/>
    <input type="file" name="logoFile" id="logoFile" onchange="setImg(this);">
    <span><img id="photourlShow" src="" width="300" height="197"/></span>
    </div>
</div>

2、js

//用于进行图片上传，返回地址
function setImg(obj){
	var f=$(obj).val();
	alert(f);
	console.log(obj);
    if(f == null || f ==undefined || f == ''){
        return false;
    }
    if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
    {
        alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
        $(obj).val('');
        return false;
    }
    var data = new FormData();
    console.log(data);
    $.each($(obj)[0].files,function(i,file){
        data.append('file', file);
    });
    console.log(data);
    $.ajax({
        type: "POST",
        url: GLOBAL_INFO.WEBURL_PREFIX+"business/uploadImg.xhtml",
        data: data,
        cache: false,
        contentType: false,    //不可缺
        processData: false,    //不可缺
        dataType:"json",
        success: function(ret) {
        	console.log(ret);
            if(ret.code==0){
                    $("#photoUrl").val(ret.result.url);//将地址存储好
                    $("#photourlShow").attr("src",ret.result.url);//显示图片   
                    alertOk(ret.message);
            }else{
                alertError(ret.message);
                $("#url").val("");
                $(obj).val('');
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("上传失败，请检查网络后重试");
        }
    });
}

3、后台代码

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.alibaba.fastjson.JSON;
import com.siyang.CommonUtil.BaseController;
import com.siyang.entity.ResponseResult;
/**
 * 照片上传工具类
 * @author admin
 *
 */
@Controller
@RequestMapping("/business")
public class UploaderController extends BaseController{
	@ResponseBody
    @RequestMapping("/uploadImg.xhtml")
    public void uploadPicture(@RequestParam(value="file",required=false)MultipartFile file,HttpServletRequest request,HttpServletResponse response){
        ResponseResult result = new ResponseResult();
		Map<String, Object> map = new HashMap<String, Object>();
        File targetFile=null;
        String url="";//返回存储路径
        int code=1;
        System.out.println(file);
        String fileName=file.getOriginalFilename();//获取文件名加后缀
        if(fileName!=null&&fileName!=""){   
            String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径
            String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置
            String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
            fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名

            //先判断文件是否存在
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
            String fileAdd = sdf.format(new Date());
            //获取文件夹路径
            File file1 =new File(path+"/"+fileAdd); 
            //如果文件夹不存在则创建    
            if(!file1 .exists()  && !file1 .isDirectory()){       
                file1 .mkdir();  
            }
            //将图片存入文件夹
            targetFile = new File(file1, fileName);
            try {
            	//将上传的文件写到服务器上指定的文件。
                file.transferTo(targetFile);
                url=returnUrl+fileAdd+"/"+fileName;
                code=0;
                result.setCode(code);
                result.setMessage("图片上传成功");
                map.put("url", url);
                result.setResult(map);
            } catch (Exception e) {
                e.printStackTrace();
                result.setMessage("系统异常，图片上传失败");
            }
        }
       writeJson(response, result);
    }
}

4、结果集实体类

package com.siyang.entity;

import java.util.Map;

public class ResponseResult {
	private Integer code;

    private String message;

    private Map<String, Object> result;

    public Integer getCode() {
        return this.code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMessage() {
        return this.message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Map<String, Object> getResult() {
        return this.result;
    }

    public void setResult(Map<String, Object> result) {
        this.result = result;
    }

}

5、向页面返回结果

package com.siyang.CommonUtil;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.google.gson.Gson;

public class BaseController {
	 protected Logger logger = LoggerFactory.getLogger(getClass());
	    /**
	     * 输出JSON数据
	     * 
	     * @param response
	     * @param jsonStr
	     */
	    public void writeJson(HttpServletResponse response, String jsonStr) {
	        response.setContentType("text/json;charset=utf-8");
			response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expires", 0);
	        PrintWriter pw = null;
	        try {
	            pw = response.getWriter();
	            pw.write(jsonStr);
	            pw.flush();
	        } catch (Exception e) {
	            logger.info("输出JSON数据异常", e);
	        }finally{
	        	if(pw!=null){
	        		pw.close();
	        	}
	        }
	    }
	    /**
	     * 
	     * 向页面响应json字符数组串流.
	     * 
	     * @param response
	     * @param jsonStr
	     * @throws IOException
	     * @return void
	     */
	    public void writeJsonStr(HttpServletResponse response, String jsonStr) throws IOException {

	        OutputStream outStream = null;
	        try {
	            response.reset();
	            response.setCharacterEncoding("UTF-8");
	            outStream = response.getOutputStream();
	            outStream.write(jsonStr.getBytes("UTF-8"));
	            outStream.flush();
	        } catch (IOException e) {
	            logger.info("输出JSON数据异常(writeJsonStr)", e);
	        } finally {
	        	if(outStream!=null){
	        		outStream.close();
	        	}
	        }
	    }

	    public void writeJsonStr(HttpServletResponse response, InputStream in) throws IOException {
	        
	        if(null == in ){
	            return ;
	        }
	        OutputStream outStream = null;
	        try {
	            response.reset();
	            response.setCharacterEncoding("UTF-8");
	            response.setHeader("Pragma", "No-cache");
	    		response.setHeader("Cache-Control", "no-cache");
	    		response.setDateHeader("Expires", 0);
	            outStream = response.getOutputStream();
	            int len = 0;
	            byte[] byt = new byte[1024];
	            while ((len = in.read(byt)) != -1) {
	                outStream.write(byt, 0, len);
	            }
	            outStream.flush();

	        } catch (IOException e) {

	            logger.info("输出JSON数据异常(writeJsonStr)", e);
	        } finally {
	        	if(outStream!=null){
	        		outStream.close();
	        		in.close();
	        	}
	        }
	    }
	    
	    
	    /**
	     * 输出JSON数据
	     * 
	     * @param response
	     * @param jsonStr
	     */
	    public void writeJson(HttpServletResponse response, Object obj) {
	        response.setContentType("text/json;charset=utf-8");
	        response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expires", 0);
	        PrintWriter pw = null;
	        Gson gson = new Gson();
	        try {
	            pw = response.getWriter();
	            pw.write(gson.toJson(obj));
	            
	            pw.flush();
	        } catch (Exception e) {
	            logger.info("输出JSON数据异常", e);
	        }finally{
	        	if(pw!=null){
	        		pw.close();
	        	}
	        }
	    }
	    
		
		
		
	   public void writeHtml(HttpServletResponse response, String html) {
	        response.setContentType("text/html;;charset=utf-8");
			response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expires", 0);
	        PrintWriter pw = null;
	        try {
	            pw = response.getWriter();
	            pw.write(html);
	            pw.flush();
	        } catch (Exception e) {
	            logger.info("输出HTML数据异常", e);
	        }finally{
	        	if(pw!=null){
	        		pw.close();
	        	}
	        }
	    }
}

题外话：推荐一个专注于Java开发的网站，做提升学习，价值阅读：Java知音

同时，扫码关注后端技术精选，回复“学习资料”，领取100套小程序源码+小程序开发视频和基本Java经典书籍电子版

在很多的网站都可以实现上传头像，可以选择自己喜欢的图片做头像，从本地上传，下次登录时可以直接显示出已经上传的头像，那么这个是如何实现的呢？

下面说一下我的实现过程(只是个人实现思路，实际网站怎么实现的不太清楚)

实现的思路：

工具：MySQL，eclipse

首先，在MySQL中创建了两个表，一个t_user表，用来存放用户名，密码等个人信息，

一个t_touxiang表，用来存放上传的图片在服务器中的存放路径，以及图片名字和用户ID，

T_touxiang表中的用户ID对应了t_user中的id。

t_user表SQL：

DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;

T_touxiang表SQL：

DROP TABLE IF EXISTS `t_touxiang`;
CREATE TABLE `t_touxiang` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `image_path` varchar(255) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `old_name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `img_user` (`user_id`),
  CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

首先，写一个UploadServlet.java，用来处理图片文件的上传，并将图片路径，图片名称等信息存放到t_touxiang数据表中，代码如下：

@WebServlet("/UploadServlet.do")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
	// 判断上传表单是否为multipart/form-data类型
	HttpSession session = request.getSession();
	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
							 // 中

	if (ServletFileUpload.isMultipartContent(request)) {

	    try {
		// 1. 创建DiskFileItemFactory对象，设置缓冲区大小和临时文件目录
		DiskFileItemFactory factory = new DiskFileItemFactory();
		// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹

		// 2. 创建ServletFileUpload对象，并设置上传文件的大小限制。
		ServletFileUpload sfu = new ServletFileUpload(factory);
		sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte =
						 // 1kb 1024kb=1M 1024M = 1G
		sfu.setHeaderEncoding("utf-8");

		// 3.
		// 调用ServletFileUpload.parseRequest方法解析request对象，得到一个保存了所有上传内容的List对象。
		@SuppressWarnings("unchecked")
		List<FileItem> fileItemList = sfu.parseRequest(request);
		Iterator<FileItem> fileItems = fileItemList.iterator();

		// 4. 遍历list，每迭代一个FileItem对象，调用其isFormField方法判断是否是上传文件
		while (fileItems.hasNext()) {
		    FileItem fileItem = fileItems.next();
		    // 普通表单元素
		    if (fileItem.isFormField()) {
			String name = fileItem.getFieldName();// name属性值
			String value = fileItem.getString("utf-8");// name对应的value值

			System.out.println(name + " = " + value);
		    }
		    // <input type="file">的上传文件的元素
		    else {
			String fileName = fileItem.getName();// 文件名称
			System.out.println("原文件名：" + fileName);// Koala.jpg

			String suffix = fileName.substring(fileName.lastIndexOf('.'));
			System.out.println("扩展名：" + suffix);// .jpg

			// 新文件名（唯一）
			String newFileName = new Date().getTime() + suffix;
			System.out.println("新文件名：" + newFileName);// image\1478509873038.jpg

			// 5. 调用FileItem的write()方法，写入文件
			File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName);
			System.out.println(file.getAbsolutePath());
			fileItem.write(file);

			// 6. 调用FileItem的delete()方法，删除临时文件
			fileItem.delete();

			/*
			 * 存储到数据库时注意 1.保存源文件名称 Koala.jpg 2.保存相对路径
			 * image/1478509873038.jpg
			 * 
			 */
			if (user != null) {
			    int myid = user.getId();
			    String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)";
			    int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName);
			    if (rows > 0) {
				session.setAttribute("image_name", fileName);
				session.setAttribute("image_path", "touxiang/" + newFileName);
				response.sendRedirect(request.getContextPath() + "/upImage.html");
			    } else {

			    }

			} else {
			    session.setAttribute("loginFail", "请登录");
			    response.sendRedirect(request.getContextPath() + "/login.html");
			}

		    }
		}

	    } catch (FileUploadException e) {
		e.printStackTrace();
	    } catch (Exception e) {
		e.printStackTrace();
	    }

	}
    }
}

在完成图片上传并写入数据库的同时，将图片路径通过session的方式发送到HTML界面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>更换头像</title>

</head>

<body>

         <formaction="UploadServlet.do" method="post"enctype="multipart/form-data">

                     本地目录：<inputtype="file" name="uploadFile">

           <img src="${image_path}" width="200" height="200">

                <inputtype="submit" value="上传头像"/>

   </form>

</body>

</html>

至此，图片上传数据库和本地服务器已经实现，那么如何在HTML界面显示出个人信息以及上传的头像呢？

首先定义一个PersonServlet类，用来读取数据库的内容，并发送到HTML界面。

代码如下：

@WebServlet("/persons.do")
public class PersonServlet extends HttpServlet {

    private static final long serialVersionUID = -800352785988546254L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
	// 判断上传表单是否为multipart/form-data类型
	Touxiang tx=null;
	
	HttpSession session = request.getSession();
	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
	if(user!=null){
	    int myid=user.getId();
	    String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?";
	    ResultSet rs=JdbcHelper.query(SQL,myid);
	    String uSQL="SELECT username,password FROM t_user WHERE id=?";
	    ResultSet urs=JdbcHelper.query(uSQL,myid);
	    System.out.println( "我的个人id是: " + myid);
	    final List<Touxiang> touxiang=new ArrayList<>();
	    try {
		if(rs.next())
		{
		    tx=new Touxiang();
		    tx.setId(rs.getInt(1));
		    tx.setImage_path(rs.getString(2));
		    tx.setOld_name(rs.getString(3));
		    touxiang.add(tx);
		}
		if(urs.next()){
		    user.setUsername(urs.getString(1));
		    user.setPassword(urs.getString(2));
		    user.setTouxiang(touxiang);
		}
		
	    } catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	    }
	   
		session.setAttribute("user", user);
		System.out.println( "我的id: " + myid);
		response.sendRedirect( request.getContextPath() + "/person.html");
	}
    }
}

在HTML界面接收信息，并显示出来，代码如下：

<div>
	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
      		 <div><a href="$path/upImage.html">更换头像</a></div>
        	
        	#foreach( $ut in  $user.getTouxiang() )
        	 <img src=" $ut.getImage_path()"  width="200" height="200">
        	 #end
        	 <div>我的头像：</div>
        	 <div>我的姓名：$user.getUsername()</div>
        	 <div><a href="$path/myAnswer.do">我的解答</a></div>
		<div><a href="$path/myQuestion.do">我的提问</a></div>
   	 </form>
	</div>
<div>
	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
      		 <div><a href="$path/upImage.html">更换头像</a></div>
        	
        	#foreach( $ut in  $user.getTouxiang() )
        	 <img src=" $ut.getImage_path()"  width="200" height="200">
        	 #end
        	 <div>我的头像：</div>
        	 <div>我的姓名：$user.getUsername()</div>
        	 <div><a href="$path/myAnswer.do">我的解答</a></div>
		<div><a href="$path/myQuestion.do">我的提问</a></div>
   	 </form>
	</div>

至此，一个基于Java的头像上传服务器，路径存储在MySQL，并在HTML界面读取出来的功能就基本实现了。头像上传之前进行处理等操作，可以选择一些插件来完成。这里只是简单的实现了基本功能。

补充

对于图片上传，这里只是简单的用Servlet实现了一下最基本的功能，仅提供思路。如果使用spring等框架，他都对图片上传做了很好的封装，应该更加容易。

后台实现图片上传应该来说比较容易，但是比较头疼的是图片上传原生的按钮丑出天际，这里推荐俩实用的上传控件，应该算比较好看。

1，H5实现的图片上传，可多张上传，可点击可拖拽上传，大概是这个样子：

基本的使用介绍和下载地址：http://blog.csdn.net/weixin_36380516/article/details/70352689

2，jQuery图像裁剪插件，大概长这样

不仅提供上传，还有裁剪等功能，UI做的也美，

地址：http://www.jq22.com/jquery-info318