SpringMVC上传头像和显示头像

列表内容

注册页面-form表单

<div class="div1">
   <h1 align="center">注  册</h1>
   <form action="user/register.do" method="post" enctype="multipart/form-data" onsubmit="return checkPhoto(this)">
      <table>
          <tr>
             <td>账号：</td>
             <td><input type="text" name="account" id="account" >
                  <span class="s1" id="acc_msg"></span>
             </td>
          </tr>
          <tr>
             <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
             <td><input type="password" name="password" id="password">
             <span class="s1" id="pwd_msg"></span>
             </td>
          </tr>
          <tr>
             <td>确认密码：</td>
             <td><input type="password" name="checkpwd" id="checkpwd">
             <span class="s1" id="checkpwd_msg"></span>
             </td>
          </tr>
          <tr>
             <td>出生日期：</td>
             <td><input type="date" name="birthday">
             <span class="s1" id="date_msg"></span>
             </td>
          </tr>
          <tr>
             <td>上传头像：</td>
             <td><input type="file" name="fileimg" id="fileimg">
             <span class="s1" id="img_msg"></span>
             </td>
          </tr>
          <tr>
          <td colspan="2" align="center">
            <input type="submit" value="注册"/>
            <input type="reset" value="重置"/>
          </td>
        </tr>
      </table>
   </form>
</div>
</div>
   -------------------------------------------------------------------------------------------------

js代码：

   <script type="text/javascript">
   $(document).ready(function(){
       $("#account").blur(function(){ // 账号检测
           console.log("有反应 blur");
           var account = document.getElementById("account");
           console.log("account="+account.value);
           //alert("进来了");
           $.ajax({
                type: "POST",
                url: "user/checkacc.do",
                data: "account="+account.value,
                success: function(msg){
                    //alert("msg:"+msg);
                    console.log("msg:"+msg);
                    var acc_msg = document.getElementById("acc_msg");
                    if(msg == "ok"){
                       acc_msg.innerHTML = '';
                       return;
                    }else{
                       account.value = '';
                       acc_msg.innerHTML = msg;
                    }
                }
           }); 
       });

       $("#checkpwd").blur(function(){ // 用ajax确认密码
           var password = document.getElementById("password");
           var checkpwd = document.getElementById("checkpwd");
           $.ajax({
               type: "POST",
               url: "user/checkpwd.do",
               data: "password="+password.value+"&checkpwd="+checkpwd.value,
               success: function(msg){
                    console.log("pwd.msg="+msg);
                    var checkpwd_msg = document.getElementById("checkpwd_msg");
                    if(msg == "ok"){
                       checkpwd_msg.innerHTML = '';
                       return;
                    }else{
                       checkpwd.value = '';
                       checkpwd_msg.innerHTML = msg;
                    }
               }
           });
       });

   }); 

   function checkPhoto(myupload){ // 检测上传是否符合要求
       var file=document.getElementById("fileimg");
       var types=file.value.substr(file.value.lastIndexOf(".")+1).toLowerCase();
       if(file.value==""){        
          alert("请选择图片后上传");
          return false;
       }else if(types!="jpg" && types!="png"){
          alert("只能上传jpg,png格式的图片");
          return false;
       }
   }
</script>
---------------------------------------------------------------------------

后台代码：

@RequestMapping("/register")
public String doRegister(String account,String password,Date birthday,MultipartFile fileimg,HttpSession session)
        throws Exception{
    System.out.println("account="+account+"  password="+password+"  birthday="+birthday);
    String path="";
    if(!fileimg.isEmpty()){
        // 上传的文件路径  建在WebRoot目录下--fileupload
        path = session.getServletContext().getRealPath("/fileupload/");
        // 上传文件名
        String filename = fileimg.getOriginalFilename();

        // 做一个判断 图片扩展名   substring(int index) 返回一个以index为索引作为起点的含头不含尾的后面的字符串 
        String types = filename.substring(filename.lastIndexOf(".")+1).toLowerCase();

        // 如果有需求是要修改上传的图片的名字为用户id开头的
        //String newfilename = account+filename.substring(filename.lastIndexOf(".")); // 取得的是 .jpg

        File filepath = new File(path,filename);
        // 判断路径是否存在，不存在就创建一个
        if(!filepath.getParentFile().exists()){
            filepath.getParentFile().mkdirs();
        }
        fileimg.transferTo(new File(path + File.separator + filename)); // 会上传到服务器中的路径
    }
    User user = new User();
    user.setAccount(Integer.parseInt(account));
    user.setPassword(password);
    user.setBirthday(new Timestamp(birthday.getTime()));
    //user.setFilepath(path);
    if(uservice.registerUser(user)){
        user.setFileimg(fileimg);
        session.setAttribute("user", user);
        return "welcome";
    }
    return "redirect:toregister.do";
}

————————-注册成功后的展示代码————————-

注册成功后会图片存储在服务器中

 <img src="<%=request.getContextPath()%>/fileupload/${user.fileimg.originalFilename}">
 ${user.fileimg.originalFilename} 欢迎，${user.account} !

需要注意的是使用springmvc中的User必须序列化，form表单中的name属性和User中的属性相一致，不一致要加注解，不然只能通过HttpServletRequest来获取form表单中的数据。
成功后的效果：