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()

您的項目需求