WEB页面通过ajax进行图片上传实例(附代码)

lt;script type="text/javascript">

$(function(){
	 
	//聚焦失焦input
	$('input').eq(0).focus(function(){
		if($(this).val().length==0){
			$(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
		}
	});

	//input各种判断
	//姓名：
	$('input').eq(0).blur(function(){
		if($(this).val().length==0){
			$(this).parent().next("div").text("真实姓名不能为空");
			$(this).parent().next("div").css("color",'red');
		}
	});
	//身份证
	$('input').eq(1).blur(function(){
		if($(this).val().length==0){
			$(this).parent().next("div").text("身份证号不能为空");
			$(this).parent().next("div").css("color",'red');
		}	
	});
//	银行卡
	$('input').eq(3).blur(function(){
		if($(this).val().length==0){
			$(this).parent().next("div").text("银行卡不能为空");
			$(this).parent().next("div").css("color",'red');
		}
	});
//	手机号
	/*$('input').eq(2).blur(function(){
		if($(this).val().length==0){
			$(this).parent().next("div").text("手机号不能为空");
			$(this).parent().next("div").css("color",'red');
		}else if($(this).val().substr(0,3)!=138&&$(this).val().substr(0,3)!=189&&$(this).val().substr(0,3)!=139&&$(this).val().substr(0,3)!=158&&$(this).val().substr(0,3)!=188&&$(this).val().substr(0,3)!=157||$(this).val().length!=11){
			$(this).parent().next("div").text("手机号格式不正确");
			$(this).parent().next("div").css("color",'red');
		}else{
			$(this).parent().next("div").text("");
		}		
	});*/

	//	提交按钮
	/*$("#submit_btn").click(function(e){	
		console.log("点击提交按钮");
		for(var j=0 ;j<4;j++){
			if($('input').eq(j).val().length==0){				
				$('input').eq(j).focus();				
				if(j==4){
					$('input').eq(j).parent().next().next("div").text("此处不能为空");
					$('input').eq(j).parent().next().next("div").css("color",'red');
					e.preventDefault();
					return;
				}
				$('input').eq(j).parent().next(".tips").text("此处不能为空");
				$('input').eq(j).parent().next(".tips").css("color",'red');	
				e.preventDefault();
				return;
			}			
		};
		
		 var s = $("#xieyi")[0].checked;
		 alert(s);
		//协议
		if($("#xieyi")[0].checked){

			var shortName = $("input[name='shortName']")[0].value;
			var crpIdNo = $("input[name='crpIdNo']")[0].value;
			var mobilePhone = $("input[name='mobilePhone']")[0].value;
			var bankNumber = $("input[name='bankNumber']")[0].value;
			//此处如果有多个name='shortName',则获得的为数组,通过[0]的方式取值第一个,以此类推
			alert("shortName:"+shortName+"--"+"crpIdNo:"+crpIdNo+"--"+
					"mobilePhone:"+mobilePhone+"--"+"bankNumber:"+bankNumber);
			 页面信息填写成功走签约接口
			console.log("shortName:"+shortName+"--"+"crpIdNo:"+crpIdNo+"--"+
					"mobilePhone:"+mobilePhone+"--"+"bankNumber:"+bankNumber);
			$.ajax({
			    //请求方式
			    type:'POST',
			    //发送请求的地址
			    url:'http://localhost:8095/shb_partner/SignContractAction/SignContract.action',
			    //服务器返回的数据类型
//			    dataType:'json',
			    //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
			    data:{
			    		'shortName':shortName,
		             	'mobilePhone':mobilePhone,
		             	'crpIdNo':crpIdNo,
		             	'bankNumber':	bankNumber
		             	
			    },
			    success:function(data){
			        //请求成功函数内容
			    	
			    	alert("请求成功");
			    	alert(data);
			    },
			    error:function(jqXHR){
			        //请求失败函数内容
			    	alert("请求失败");
			    }
			    
			    error: function (data){ 
			    	console.log("1234");
	             		$.messager.alert('消息',"注册失败",'error');
	             	}, 
	             success: function (data){
					console.log("123");
					console.log("jsonString");
	            	 alert(data);
	            	 e.preventDefault();
		             	}
			});
			
		}else{			
			$("#xieyi").next().next(".tips").text("请阅读协议");
			$("#xieyi").next().next(".tips").css("color",'red');
			e.preventDefault();
			return;
		}
	});*/
	

});

function go(){
	console.log("点击提交按钮");
			
	if($("#xieyi")[0].checked){
			for(var j=0 ;j<4;j++){
			if($('input').eq(j).val().length==0){				
				$('input').eq(j).focus();				
				if(j==4){
					$('input').eq(j).parent().next().next("div").text("此处不能为空");
					$('input').eq(j).parent().next().next("div").css("color",'red');
					return;
				}
				$('input').eq(j).parent().next(".tips").text("此处不能为空");
				$('input').eq(j).parent().next(".tips").css("color",'red');	
				return;
			}			
		};		
			
		var form = document.getElementById("upload-form");//获取表单的数据
		var formdata = new FormData( form );//格式化表单数据
		
			console.log("格式化表单数据完成"+formdata);
					
			$.ajax({
			    //请求方式
			    type:'POST',
  				processData: false,// 告诉jQuery不要去处理发送的数据
  			    contentType: false,// 告诉jQuery不要去设置Content-Type请求头
  			    /* dataType: 'json', */ //设置为返回的数据类型
  			    //发送请求的地址
			    url:'http://localhost:8095/hk_partner/SignContractAction/SignContract.action',
			    data:formdata,
	            success: function(result){
	            console.log("响应成功");
	            	 alert(result);
		        }
			});
				console.log("ajax请求完成");
				
				}else{
			$("#xieyi").next().next(".tips").text("请阅读协议");
			$("#xieyi").next().next(".tips").css("color",'red');
			e.preventDefault();
			return;
			}	
			}
</script>　　

后端代码:

mport org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;


 public void SignContract(HttpServletRequest request,HttpServletResponse response) {
        
           
			String shortName  = request.getParameter("shortName");
			String bankNumber  = request.getParameter("bankNumber");
			String crpIdNo  = request.getParameter("crpIdNo");
			String mobilePhone  = request.getParameter("mobilePhone");
			MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
			MultipartFile positive  =	mRequest.getFile("idcard_positive");//身份证正面
			MultipartFile reverse  =	mRequest.getFile("idcard_reverse");//身份证反面
			try {
				if(positive.getSize()==0 ) {
					outPrint(response,"需上传身份证正面");
					return;
				};
				if(reverse.getSize()==0) {
					outPrint(response,"需上传身份证正面");
					return;
				};
			}catch (Exception e) {
				return;
			}

}

public static  void outPrint(HttpServletResponse response,Object obj) throws IOException{
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("progma","no-cache");
		response.setHeader("Cache-Control","no-cache");
		PrintWriter out = response.getWriter();
		out.print(obj);
		out.flush();
		out.close();
	}
	

计算机

2022年1月17日

• 上一页
• 下一页