程式師世界 >> 編程語言 >> JAVA編程 >> JAVA綜合教程 >> JavaEE_Mybatis_SpringMVC (異步上傳)SpringMvc文件上傳通過ajaxupfileload.js

JavaEE_Mybatis_SpringMVC (異步上傳)SpringMvc文件上傳通過ajaxupfileload.js

編輯：JAVA綜合教程

JavaEE_Mybatis_SpringMVC (異步上傳)SpringMvc文件上傳通過ajaxupfileload.js

最近博主又去研究文件上傳了

這次的文件上傳是通過ajax上傳文件。(看了下ajaxupfileload.js,主要是通過 iframe 提交的數據。)

需求就是在新增用戶的時候通過異步上傳表單和圖片, 功能如圖所示：

系列文章

1.http://cqjava.iteye.com/blog/2048233

2.http://cqjava.iteye.com/blog/2053119

3.http://cqjava.iteye.com/blog/2058912

最終歷經了千辛萬苦終於研究了出來,主要用到了ajaxupfileload.js 插件。

ajaxupfileload.js 提交數據的時候需要以JSON格式提交表單數據，由於原生的 javaScript,Jquery 不支持將表單數據轉換成JSON格式的數據，博主又用了另一個插件，將表單數據轉換為JSON格式進行提交。

ajaxupfileload.js 裡面需要用到 JQuery.handleError 函數，該函數在JQuery高版本中被移除了，我將其放到ajaxupfileload.js，作為jquery的擴展函數

主要用到的插件下載地址 http://pan.baidu.com/s/1slnAdMt

1.異步提交數據 ajaxupfileload.js

2.將表單轉換為JSON formToJson.js

主要步驟

1.將表單數據轉換為JSON格式

2.利用ajaxupfileload.js 將數據異步提交到服務器上

3.後台接收數據並處理參考文章 SpringMVC後台接收數據

前端js --- 通過js提交數據

ajaxupfileload + 表單轉JSON

/*添加或者更新結果*/
function saveOrUpdateForm(){
	
    var checkImageFlag = checkImageFileType();			//校驗圖片是否是正確的格式
	
    var flag = $("#addOrUpdateModalForm").validationAjax();		//對表單數據的校驗
    
    flag = checkImageFlag && flag;
    
    //alert(flag);
    
    if(flag){
        var postUrl = appCtx+"userInfo/insertOrUpdate.do";
        var params = $("#addOrUpdateModalForm").serializeJson();		//將表單數據轉換為JSON
    	
    	//alert(params.name);
    	
    	$("#loading").modal("show");
    	function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: postUrl, //用於文件上傳的服務器端請求地址
                    secureuri: false, //是否需要安全協議，一般設置為false
                    fileElementId: 'userImage', //文件上傳域的ID
                    dataType: 'json', //返回值類型 一般設置為json
                    data: params, //需要傳遞JSON對象如這種   {'name':'hahah'}
                    success: function (data, status)  //服務器成功響應處理函數
                    {
                        //alert('上傳成功');
                    },
                    error: function (data, status, e)//服務器響應失敗處理函數
                    {
                        //alert(e);
                    	doSuccess();
                		//成功後，模態框的狀態
                		successModalStatus(oneRowModalCloseBtn,oneRowModalSaveBtn,oneRowModalUpdateBtn,oneRowModal,oneRowModalTitle,oneRowModalBody);
                		//成功後，刷新表單
                		succesListFormReflush();
                    }
                }
            )
            return false;
        }
   	
    	ajaxFileUpload();				//將頭像和表單數據同時上傳
    	$("#loading").modal("hide");
        
    }
}

前端頁面 + 後台接收部分，寫的很爛，僅作為參考

前端頁面

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%-- <script type="text/javascript"
	src="<%=request.getContextPath() %>/resources/js/jquery-1.4.4.min.js"></script> --%>


   
   上傳頭像

				當前頭像:
				

				<%--  --%>
				
					
						
							
						
					
				
				
					
						
							
						
					
				
			
			
			
				
				
			 
		
		
		
			
			機構名稱：
				
					
					
					<%-- 
						請選擇
						
							${o.companyName }
						
					 --%>
					*
					
					
						
							
						
					
				
			
		
	
		
			
				姓名：
				
					
					*
				
			
		
	
		
			
				員工工號：
				
					
					*
				
			
		
	
		
			
				性別：
				
					
						請選擇
						男
						女
						
				
			
		
		
		
			
				生日：
				
					
				
			
		
		
		
			
				身份證號：
				
					
				
			
		
		
		
			
				所屬部門：
				
					請選擇
					
						${p.name}
					
						
			
				
		
		
			
				職務/崗位：
				
					請選擇
					
						${p.positionName }
					
						
			
		
		
		
		
		
			
				手機號：
				
					
						
						*
						
							
				
				
					
						
					
						
			
		
		
		
			
				郵箱：
				
					
					

				
			
		
		
		
			
				微信號：
				
					
				
			
		
		
		
			
				入職時間：
				
					
				
			
		
		
		
			
				轉正時間：
				
					
				
			
		
		
		
			
				卡號：
				
					
				
			
		
		
		
			
				備注/情況：

後台controller

/**
	 * 
	 * @作者：szh
	 * @創建時間：2016年3月18日
	 * @方法功能：添加和修改
	 */
	@RequestMapping("insertOrUpdate")
	@ResponseBody
	public ActionResult insertOrUpdate(UserInfo userInfo, HttpSession session, HttpServletRequest request, HttpServletRequest response, @RequestParam(value="userImage",required=false)MultipartFile userImage) {
		// 定義結果模態框
		ActionResult result = new ActionResult();
		try {
			Object obj = session.getAttribute(ConstantAdmin.SESSION_ADMIN_INFO);
			// 判斷userId 為null是 添加|不為null是修改
			if (userInfo.getUserId() == null) {
				if (obj instanceof UserOrganization) {
					// 將session對象轉為organization類型
					UserOrganization userOrg = (UserOrganization) obj;
					// 給員工設置organizationId
					userInfo.setOrganizationId(userOrg.getOrganizationId());
					userInfo.setLastUpdateBy(userOrg.getCompanyName());
					userInfo.setUserUuid(UUIDUtil.getUUID());
					userInfo.setPassword("123456");
					
					//用戶上傳頭像
					String path = request.getSession().getServletContext().getRealPath("/resources/images/userImage");                //文件在服務器上存儲的位置  
			          
			        String originFileName =  userImage.getOriginalFilename();                        //獲取原始文件的名字  
			        //System.out.println(originFileName);                                         //上傳文件的名字  
			     
			        String type = originFileName.substring(originFileName.lastIndexOf(".")+1);  //獲取文件的類型,以最後一個"."標識的文件類型作為標准     
			        //System.out.println(type);  
			  
			        String fileName = System.currentTimeMillis() + "." + type;                  //設置新文件的名字
			        
			        if((!(type==null)) && (!(type.equals(""))))							//確實上傳了文件
			        {
			        	File targetFile = new File(path, fileName);                                 //在指定路徑創建一個文件  
					      
				        try {  
				        	userImage.transferTo(targetFile);                                            //將文件保存到服務器上指定的路徑上 
				        	userInfo.setImageUrl(fileName);
				        } catch (IllegalStateException e) {  
				            e.printStackTrace();  
				        } catch (IOException e) {  
				            e.printStackTrace();  
				        }
			        }
			        	
					userInfoService.insertSelective(userInfo);
					// 日志記錄
					Logger logger = Logger.getLogger(this.getClass());
					MDC.put("adminId", userOrg.getOrganizationId());
					MDC.put("adminType", "2");
					MDC.put("logType", TypeModel.LogType.LOG_SYS);
					logger.info("企業管理員(" + ((UserOrganization) obj).getCompanyName() + ")新增員工信息成功！");
				} else if (obj instanceof SysUser) {
					userInfo.setLastUpdateBy(((SysUser) obj).getLoginName());
					userInfoService.insertSelective(userInfo);
				}
				// 用戶崗位中間表對象
				UserPositionRel positionRel = new UserPositionRel();
				// 設置userId
				positionRel.setUserId(userInfo.getUserId());
				// 查詢該user是否已存在崗位
				List> list = userPositionService.selectUserPositionRel(positionRel);
				if (list.size() == 0) {
					// 設置新崗位id
					positionRel.setPositionId(userInfo.getPositionId());
					// 未被分配崗位則直接進行分配(插入)
					userPositionService.insertUserPositionRel(positionRel);
				} else {
					// 已被分配崗位則刪除中間表中已有的崗位
					userPositionService.deleteUserPositionRel(Integer.toString(userInfo.getUserId()));
					// 設置新崗位id
					positionRel.setPositionId(userInfo.getPositionId());
					// 將新崗位插入中間表
					userPositionService.insertUserPositionRel(positionRel);
				}
				result.setResult(OPERATOR_RESULT_SUCCESS_KEY);
				result.setMessage(OPERATOR_RESULT_SUCCESS_ADD_VALUE);
				// 更新
			} else {
				// 用戶和崗位中間表對象
				UserPositionRel positionRel = new UserPositionRel();
				// 設置userId
				positionRel.setUserId(userInfo.getUserId());
				// 查詢該用戶是否已被分配崗位
				List> list = userPositionService.selectUserPositionRel(positionRel);
				// size==0 該角色未被分配崗位 反之已被分配崗位
				if (list.size() == 0) {
					// 設置新崗位id
					positionRel.setPositionId(userInfo.getPositionId());
					// 未被分配崗位則直接進行分配(插入)
					userPositionService.insertUserPositionRel(positionRel);
				} else {
					// 已被分配崗位則刪除中間表中已有的崗位
					userPositionService.deleteUserPositionRel(Integer.toString(userInfo.getUserId()));
					// 設置新崗位id
					positionRel.setPositionId(userInfo.getPositionId());
					// 將新崗位插入中間表
					userPositionService.insertUserPositionRel(positionRel);
				}
				
				String path = request.getSession().getServletContext().getRealPath("/resources/images/userImage");                //文件在服務器上存儲的位置
				
				//修改用戶上傳的頭像
				//刪除原有的頭像,需查詢原有圖片名字
				//用戶上傳頭像
				UserInfo oldUserInfo = userInfoService.selectByPrimaryKey(String.valueOf(userInfo.getUserId()));
				String oldImageUrl = oldUserInfo.getImageUrl();
						
				//刪除舊文件
				//如果與原來頭像是一個圖片
				String currentImageUrl = userInfo.getImageUrl();
				if(currentImageUrl!=null && (!(oldImageUrl==null || oldImageUrl.equals(""))) && currentImageUrl.equals(oldImageUrl)){
					//用戶沒上傳新圖像  不做任何操作
				}
				else{
					//如果原頭像存在,則刪除原頭像,有可能有冗余數據
					File oldFile = new File(path+File.separator+oldImageUrl);
					if(oldFile.exists() && oldFile.isFile()){
						oldFile.delete();
					}
					
					//存儲新上傳的頭像  
			        String originFileName = userImage.getOriginalFilename();                        //獲取原始文件的名字         
			        String type = originFileName.substring(originFileName.lastIndexOf(".")+1);  //獲取文件的類型,以最後一個"."標識的文件類型作為標准     
			        
			        String fileName = System.currentTimeMillis() + "." + type;                  //設置新文件的名字 
			        File targetFile = new File(path, fileName);                                 //在指定路徑創建一個文件  
			      
			        try {  
			        	userImage.transferTo(targetFile);                                            //將文件保存到服務器上指定的路徑上 
			        	userInfo.setImageUrl(fileName);
			        } catch (IllegalStateException e) {  
			            e.printStackTrace();  
			        } catch (IOException e) {  
			            e.printStackTrace();  
			        }	
				}
		        		
				if (obj instanceof UserOrganization) {
					// 將session對象轉為organization類型
					UserOrganization userOrg = (UserOrganization) obj;
					userInfo.setLastUpdateBy(userOrg.getCompanyName());
					userInfoService.updateByPrimaryKeySelective(userInfo);
					// 日志記錄
					Logger logger = Logger.getLogger(this.getClass());
					MDC.put("adminId", userOrg.getOrganizationId());
					MDC.put("adminType", "2");
					MDC.put("logType", TypeModel.LogType.LOG_SYS);
					logger.info("企業管理員(" + ((UserOrganization) obj).getCompanyName() + ")修改員工信息成功！");
				} else if (obj instanceof SysUser) {
					userInfo.setLastUpdateBy(((SysUser) obj).getLoginName());
					userInfoService.updateByPrimaryKeySelective(userInfo);
					// 日志記錄
					Logger logger = Logger.getLogger(this.getClass());
					MDC.put("adminId", ((SysUser) obj).getId());
					MDC.put("adminType", "1");
					MDC.put("logType", TypeModel.LogType.LOG_SYS);
					logger.info("後台管理員(" + ((SysUser) obj).getLoginName() + ")修改員工信息成功！");
				}
				result.setResult(OPERATOR_RESULT_SUCCESS_KEY);
				result.setMessage(OPERATOR_RESULT_SUCCESS_UPDATE_VALUE);
			}
		} catch (Exception e) {
			e.printStackTrace();
			result.setResult(OPERATOR_RESULT_ERROR_KEY);
			result.setMessage(OPERATOR_RESULT_ERROR_VALUE);
		}
		// 返回結果
		return result;
	}

插件的源碼

1.ajaxupfileload.js

jQuery.extend({
	//擴展函數
	handleError: function( s, xhr, status, e ){
	// If a local callback was specified, fire it
		if ( s.error ) {
			s.error.call( s.context || s, xhr, status, e );
		}

		// Fire the global callback
		if ( s.global ) {
			(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
		}
	},
	
    createUploadIframe: function(id, uri)
	{
			//create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '