使用jquery異步上傳文件----SpringMVC註解開發

<span style="font-size:14px;color:#000000;background-color: rgb(204, 204, 204);"><script type="text/javascript">
 //採用jquery.form.js異步上傳圖片,並結合<form>表單
 function uploadFic(){
   $("#jvForm").ajaxSubmit({
    url : "${pageContext.request.contextPath}/upload/uploadPic.do",
    dataType : "json",
    type : "post",
    success : function(data){
     //處理結果
     //將相對路徑設置給隱藏域中,提交時用
     $("#imgUrl").val(data.path);
     //將全路徑設置給img標籤,顯示圖片用
     $("#allImgUrl").attr("src",data.url); 
    }
   });
 }
</script></span><strong></strong>

<span style="font-size:14px;"><div class="body-box" style="float:right">
 <form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">
  <table cellspacing="1" cellpadding="2" width="100%" border="0" class="pn-ftable">
   <tbody>
    <tr>
     <td width="20%" class="pn-flabel pn-flabel-h">
      <span class="pn-frequired">*</span>
      品牌名稱:</td><td width="80%" class="pn-fcontent">
      <input type="text" class="required" name="name" maxlength="100"/>
     </td>
    </tr>
    <tr>
     <td width="20%" class="pn-flabel pn-flabel-h">
      <span class="pn-frequired">*</span>
      上傳商品圖片(90x150尺寸):</td>
      <td width="80%" class="pn-fcontent">
      注:該尺寸圖片必須爲90x150。
     </td>
    </tr>
    <tr>
     <td width="20%" class="pn-flabel pn-flabel-h"></td>
      <td width="80%" class="pn-fcontent">
      <img src="" id="allImgUrl"/>
      <input type="hidden" name="imgUrl" id="imgUrl"/>
      <input type="file" name="uploadPic" onchange="uploadPic()"/>
     </td>
    </tr>
    <tr>
     <td width="20%" class="pn-flabel pn-flabel-h">
      品牌描述:</td><td width="80%" class="pn-fcontent">
      <input type="text" class="required" name="name" maxlength="80"  size="60"/>
     </td>
    </tr>
    <tr>
     <td width="20%" class="pn-flabel pn-flabel-h">
      排序:</td><td width="80%" class="pn-fcontent">
      <input type="text" class="required" name="name" maxlength="80"/>
     </td>
    </tr>
    <tr>
     <td width="20%" class="pn-flabel pn-flabel-h">
      是否可用:</td><td width="80%" class="pn-fcontent">
      <input type="radio" name="isDisplay" value="1" checked="checked"/>可用
      <input type="radio" name="isDisplay" value="0"/>不可用
     </td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td class="pn-fbutton" colspan="2">
      <input type="submit" class="submit" value="提交"/> &nbsp; <input type="reset" class="reset" value="重置"/>
     </td>
    </tr>
   </tbody>
  </table>
 </form>
</div></span>

<span style="font-size:14px;">@Controller
public class UploadController {
	@RequestMapping(value = "/upload/uploadPic.do")
	public void uploadBrandPic(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response,HttpServletRequest request){
		//圖片名稱生成策略---採用時間格式(精確到毫秒)並追加隨機3位(10以內)數字
		//精確到毫秒
		DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		String picName = df.format(new Date());
		//隨機再生成3位 10以內的數
		Random r = new Random();
		for(int i=0;i<3;i++){
			picName += r.nextInt(10);
		}
		//獲取擴展名
		String originalFilename = file.getOriginalFilename();
		String ext = FilenameUtils.getExtension(originalFilename);
		//圖片上傳的路徑
		String path = "upload/" + picName + "." + ext;
		//上傳圖片到指定位置記得先創建upload文件夾或是程序創建文件夾
		try {
			file.transferTo(new File(request.getSession().getServletContext().getRealPath("/") + path));
		} catch (IllegalStateException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}</span>

注意：需引入<script src="${pageContext.request.contextPath }/res/common/js/jquery.form.js" type="text/javascript"></script>文件