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

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 代码

Query的ajax请求

$.ajax()

因为是发送 ajax 请求，不是操作DOM
不需要依赖选择器去获取到元素
他的使用是直接依赖 jQuuery 或者 $ 变量来使用
语法：$.ajax( { 本次发送ajax的配置项 } )

配置项

url：必填，表示请求地址
method：选填，默认是GET，表示请求方式
data：选填，默认是 ’ ’ ，表示携带给后端的参数
async：选填，默认是 true ，表示是否异步
success：选填，表示请求成功的回调函数
error：选填，表示请求失败的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $.ajax({
      url:'haha.php',
      success:function(res){
        //res 接受的就是后端给回的相应结果
        console.log(res)
      },
      error:function(){
        console.log('请求失败')
      }
    })
  </script>
</body>
</html>

以上就是jQuery的ajax请求了

、跨域问题的来源

浏览器跨域处理原由：浏览器安全防护的“同源政策”影响。

关于什么是“同源政策”，可以看这边文章，讲解比较详细易懂https://blog.csdn.net/dreamcatcher1314/article/details/78652884

跨域请求的限制主要是针对前端，Java后端发送Http请求是不存在跨域的问题的，所以通过后端发送Http跨域请求也是解决跨域的一种方式。而这里我会详细介绍前后端结合的几种跨域解决方案

二、跨域请求解决方案

1.Jsonp跨域

Jsonp是目前使用比较广泛的跨域解决方案，浏览器兼容比较好，但是只能支持Get请求方式。

Jsonp的实现原理：在同源政策的影响下，Ajax请求不能直接跨域，但script、iframe、img等html标签的src属性是不受同源政策的影响，直接可以跨域请求的。

$.getJSON("http://item.yangguangqicai.com/product_big/deleteAllFoot/"+userId+"?callback=?",function(data){
					
				});

@RequestMapping(value="/getFootprint/{userId}", method=RequestMethod.GET, produces="text/html;charset=UTF-8")
	@ResponseBody
	public String getFootprint(@PathVariable("userId") int userId,
			@RequestParam("callback") String callback) {
		String backJson;
		try {
			backJson=prodBigCustomerApi.getFootprint(userId);

		} catch (Exception e) {
			backJson="";
			logUtil.writeLog("error", "调用获取商品浏览记录异常", e);
		}

		return callback + "(" + backJson + ")";
	}

    $.ajax({
        type: "Get",
        url: apiHead + "/api/ShoppingCart/?" + Math.random(),
        data: parmModel,
        dataType: 'jsonp',
        success: function (resultflag, textStatus) {        	
        	
            if (parseInt(resultflag) > 0) {  //js,  删除选中的一项
            	var par=$(obj).parent().parent().parent();
            	var currprice=parseFloat((productPrice=="")?0:productPrice);
            	if(productPrice==987123){//价格待议型
            		currprice=0;
            	}
            	var _totalPrice=$("#span_totalprice").text();
            	
            	var totalprice=parseFloat(_totalPrice) - currprice*parseFloat(quantity);
            	if($(obj).parents("table").find("tr").length==1){
            		clearCart1();
            	}else{
            		par.remove();
            		var rowcount=parseInt($("#cartProductCount").text()) - 1; //重新计算数量
            		$("#cartProductCount").text(rowcount);
                	$("#span_count").text(rowcount);
                	
                	$("#span_totalprice").text("￥"+totalprice.toFixed(2)); //重新算总价
                	
            	}
            	
            }
            
        	//刷新上方购物车
        	//reloadCart();
            reloadRightCart();
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
        }
    });

2.Cross

在线咨询

上一篇：前端优化方法：懒加载
下一篇：重磅！正式编！中国人民银行招录4620人！冬奥冰雪产

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

$.ajax()

您的项目需求