您的位置 首页 java

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;
}
 

文章来源:智云一二三科技

文章标题:JAVA Ajax 上传文件并带其他参数,前端,后台 demo 源代码

文章地址:https://www.zhihuclub.com/174621.shtml

关于作者: 智云科技

热门文章

网站地图