使用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" οnchange="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>文件