1. 程式人生 > >ajaxfileupload.js 上傳多個檔案

ajaxfileupload.js 上傳多個檔案

上傳單個檔案

JS

$.ajaxFileUpload({ 
	        url :"",
	        secureuri : false, 
	        fileElementId : 'img',  --傳入file ID
	        data:{},
	        type : 'post',
	        dataType : 'json', //返回值型別 一般設定為json  
	        success : function(data, status){ //伺服器成功響應處理函式  
	          	
	          	}
	        } 
	    });

後臺(使用 

import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest;

)

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = null;  
file = multipartRequest.getFile("img");// 獲取上傳檔名  
String protoName = "";
protoName =file.getOriginalFilename();	

上傳多個檔案

JS

$.ajaxFileUpload({ 
		 
	        url :",
	        secureuri : false, 
	        fileElementId : ['img1','img2','img3'], --多個File
	        data:{},
	        type : 'post',
	        dataType : 'json', //返回值型別 一般設定為json  
	        success : function(data, status){ //伺服器成功響應處理函式  
	          	
	        } 
	    });

後臺

獲取一個Map,迴圈獲取單個

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, List<MultipartFile>> fileMap =  multipartRequest.getMultiFileMap();
String dir=request.getSession().getServletContext().getRealPath("/");
File protoFile = new File(dir);
if(!protoFile.exists()){
		 		
	protoFile.mkdir();
}
Map<String, String> st = new HashMap<String, String>();
for (String key : fileMap.keySet()) { 
				
	MultipartFile file = multipartRequest.getFile(key);
				
} 

修改  ajaxfileupload.js 檔案

如下所示: 註釋 

var oldElement = jQuery('#' + fileElementId);   var newElement = jQuery(oldElement).clone();   jQuery(oldElement).attr('id', fileId);   jQuery(oldElement).before(newElement);   jQuery(oldElement).appendTo(form);

加上

 for(var i in fileElementId){    var oldElement = jQuery('#' + fileElementId[i]);    var newElement = jQuery(oldElement).clone();    jQuery(oldElement).attr('id', fileId);    jQuery(oldElement).before(newElement);    jQuery(oldElement).appendTo(form);    } 

 for(var i in fileElementId){ 
  var oldElement = jQuery('#' + fileElementId[i]); 
  var newElement = jQuery(oldElement).clone(); 
  jQuery(oldElement).attr('id', fileId); 
  jQuery(oldElement).before(newElement); 
  jQuery(oldElement).appendTo(form); 
  } 

  /*
  var oldElement = jQuery('#' + fileElementId);
  var newElement = jQuery(oldElement).clone();
  jQuery(oldElement).attr('id', fileId);
  jQuery(oldElement).before(newElement);
  jQuery(oldElement).appendTo(form);
  */

這樣就可以實現多個檔案上傳了,但有個問題.還是用這個JS去實現單個上傳就會報錯。暫時能想到的解決方案。是重新複製一份JS檔案,單個的用單個,多個用多個。朋友們有合適的解決辦法。歡迎留言