ajaxfileupload.js+SpringMVC實現文件上傳

一、jsp頁面

js下載 ：

http://download.csdn.net/detail/longtingjing/9725858

js引用：

<script src="/assets/js/jquery.min.js"></script>
<script src="/js/ajaxfileupload.js"></script>

 <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                             	圖片：
                            </div>
                               <div class="am-u-sm-8 am-u-md-4 am-u-end">
				    			<div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
									  <div style="width: 10px;margin: 0 auto;"><img src="/imgs/loading.gif"/></div>
									  <br></br>
									  <div style="width: 120px;margin: 0 auto;"><span>請稍等...</span></div>
									  <br></br>
								 </div>
								<input type="hidden" id="imgUrl" name="imgUrl" value="">
							     <img id="imgshow"  style="width:130; height=:120;display:none;" src=" "/>
			                    <div class="am-form-group">
			                         <input type="file" id="file" name="file">
									 <input type="hidden" id="flag" name="flag" value="ajax文件上傳"/>
									 <input type="button" id="btnUpload" οnclick="ajaxFileUpload()" value="上傳圖片" />
					             </div>
		                     </div>

js代碼：

 function ajaxFileUpload() {
  	  // 開始上傳文件時顯示一個圖片
  	  $("#wait_loading").show();  	  
  	  var elementIds=["flag"]; //flag爲id、name屬性名
  	  $.ajaxFileUpload({
  	   url: '/confMana/upload.html', 
  	   type: 'post',
  	   secureuri: false, //一般設置爲false
  	   fileElementId: 'file', // 上傳文件的id、name屬性名
  	   dataType: 'json', //返回值類型，一般設置爲json、application/json
  	   elementIds: elementIds, //傳遞參數到服務器
  	   success: function(data,status){ 
  			   data= $.parseJSON( data );
  		   if(data.success){
  		 	 $("#wait_loading").hide();
  		 	 $("#imgUrl").val(data.data.imgUrl);
  		 	 $("#imgshow").attr("src",data.data.imgUrl);
  		 	 $("#imgshow").css("display","block");
  			   alert("上傳成功！");
  		   }else{
  		 	 $("#wait_loading").hide();
  	    	alert("上傳失敗！");
  		   }
  	   },
  	   error: function(data, status, e){ 
  		 	 $("#wait_loading").hide();
  	    	alert("請求失敗！");
  	   }
  	  });
	 }
	

二、conntroller

 @RequestMapping(value="/confMana/upload.html",method = RequestMethod.POST)  
    public @ResponseBody String uploadForApp(HttpServletRequest request,@RequestParam("file") MultipartFile file) throws IllegalStateException, IOException {  
        String relPathOfSavedDir="/uploads/app/";  
        try {  
            File savedDir = prepareSavedDir(request, relPathOfSavedDir);  
            String savedFileName=getSavedFileName(file.getOriginalFilename());  
            file.transferTo(new File(savedDir,savedFileName));  
            String imgUrl=relPathOfSavedDir+savedFileName;
            Map<String, Object> map=new HashMap<>();
            map.put("imgUrl", imgUrl);
            return  toObjJson(map);  
        } catch (Exception e) {  
            return null;  
        }  
    }  
      
    private File prepareSavedDir(HttpServletRequest request,String relativePath) throws Exception{  
        File dir=new File(request.getSession().getServletContext().getRealPath(relativePath));  
        if(!dir.exists()){  
            if(!dir.mkdirs()){  
                throw new Exception("創建保存目錄失敗");  
            }  
        }  
        return dir;  
    }  
      
    private String getSavedFileName(String origFileName){  
        return RandomStringUtils.randomNumeric(8)+"."+FilenameUtils.getExtension(origFileName);  
    } 

如果出現上傳進不了success請參照：

http://blog.csdn.net/qq_32588349/article/details/52056283