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表單中的數據。
成功後的效果：