JAVA Ajax 上传文件并带其他参数，前端，后台 demo 源代码

下面代码试用于jsp, freemarker 因为有使用到 ${request.contextPath}

html 代码

 <form id="uploadImage" enctype="multipart/form-data" action="${request.contextPath}/re/updateIdCard" method="post"/>
 <div class="col-xs-12 col-sm-6">请上传身份证件 <em>*</em><br/>
 <input type="file" name="idCardPath" id="idCardPath" accept="image/*" class="form-control picture-address" onchange="checkImage()" required/>
 <input type="button" name="upload" id="upload" class="btn btn-success" style="width:150px;" onclick="doUpload()" value="重新上传证件" />
 <input type="hidden" name="uid" id="uid" value="${re.uid}"/>
 <input type="hidden" name="id" id="id" value="${re.id}"/>
 	<#if re.idCardPath_1??><input type="hidden" name="oriIdCardPath" id="oriIdCardPath" value="${re.idCardPath_1}"/>
 	<a href="${request.contextPath}${re.idCardPath_1}" target="_blank"><img id="picture" src="${request.contextPath}${re.idCardPath_1}" width="300px" height="400px" alt="点击查看原图"/></a></#if> 		
		</div>
		</form>

javascript

function doUpload(){
	if(document.getElementById('idCardPath').value == ""){
		alert("请选择证件照片；");
	 	 return false;
	}
	var fileSize = document.getElementById('idCardPath').files[0]; //获得文件大小； 	
	 if(fileSize.size > 1048576 ){ //1*1024*1024
	 	 alert("证件照片过大，请小于1M");
	 	 return false;
	 } 
 var formData = new FormData($("#uploadImage")[0]);
 $.ajax({
 url:"${request.contextPath}/re/updateIdCard",
 type:"POST",
 data:formData,
 async:false,
 cache:false,
 contentType:false,
 processData:false,
 success:function(data){ 
	 if(data.success){
	 		//alert( data.resultMsg);
	 		var path = data.resultMsg;
	 		document.getElementById('picture').src="${request.contextPath}"+path; 		 		 
	 }else{
	 		alert(data.resultMsg);
	 }
 },
 error:function(returndata){
 alert("error:"+returndata);
 }
 });
}

下面为spring boot后台 controller 代码

@RequestMapping(value="/updateIdCard",method=RequestMethod.POST)
	public Object uploadPicture(@RequestParam(value = "idCardPath",required=true) MultipartFile file,	
			@RequestParam(value="uid",required=true) String uid,	@RequestParam(value="id",required=true) String id,
			@RequestParam(value="oriIdCardPath") String oriIdCardPath,
				HttpServletRequest request){
		ResultSupport result = new ResultSupport();
		log.debug("原始文件名称:"+file.getName()+","+file.getOriginalFilename()); 
		//max size 1048576
 log.debug("图片大小"+file.getSize()); 
 if (file.isEmpty()) {	
 	result.setSuccess(false);
			result.setResultMsg( "请选择文件身份证照片；");
			return result;
		}
		String fileName = file.getOriginalFilename();
		String prefix = fileName.substring(fileName.lastIndexOf("."));
		fileName = System.currentTimeMillis()+Utils.getRandomString(8) + prefix;
		int size = (int) file.getSize();
		System.out.println(fileName + "-->" + size);
		// String filePath ="/usr/mydata/uploadid/";
		String filePath = request.getRealPath("/uploadid/");
		File dest = new File(filePath + fileName);
		if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
			System.out.println("save exists");
			dest.getParentFile().mkdir();
		}
		String errMsg="";
		try {
			file.transferTo(dest); // 保存文件
			filePath="/uploadid/"+fileName;	
			//update database path
			int count = service.updateIdCardById(filePath,id);			
			result.setResultMsg(filePath);
			result.setSuccess(true);
			//delete old file
			if (null != oriIdCardPath && !"".equals(oriIdCardPath)) {
				File oriFile = new File(oriIdCardPath);
				if (oriFile.exists() && oriFile.isFile()) {
					oriFile.delete();
				}	
			}
			return result;
		} catch (IllegalStateException e) {
			e.printStackTrace();
			errMsg = "导入失败:" + e.getMessage();
		} catch (IOException e) {
			e.printStackTrace();
			errMsg = "导入失败:" + e.getMessage();
		}catch (Exception e) {
			e.printStackTrace();
			errMsg = "导入失败:" + e.getMessage();
		}
		result.setResultMsg( errMsg);
 result.setSuccess(false);
		return result;
	}