使用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;">@Controllerpublic 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 blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}</span>

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