ajaxsubmit表单提交以及图片上传

最新推荐文章于 2021-08-06 13:03:43 发布

wolf_Springs

最新推荐文章于 2021-08-06 13:03:43 发布

阅读量1.9k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

function reg(){	
    		if(true){
    			var options = {
    		        cache: true,//
	                type: "POST",//发送方式
	                url:'myulr',//url地址
	                data:$('#regForm').serialize(),//.serialize()方法将form表单内所有数据组装
	                async: false,//同异步提交
	                error: function(request) {
	                    alert("Connection error");
	                },
	                success: function(date) {
	                    openDialog('三秒后自动跳转至首页','${IYUANQU_IXUEXI_URL}/');
	                }
	    			
    			}
	   			$("#regForm").ajaxSubmit(options);
    		}
    	}

在提交如上from表单时发现无法进行提交,因为页面中有一个图片上传功能,其中一个input标签的type='file',这样在submit情况下提交时没问题的.但是ajax情况下无法提交,

$(function() {
	    $('#upload_images').MultiFile({
			max:1,
	        accept: '${UPLOAD_IMG}',
	        STRING:{
	            remove:'<img src="deleteMypicUrl" id="delPic" title="删除文件" align="absmiddle"/>',
	            target:'images',
	            file:'$file',
	            selected: 'Selecionado: $file',
	            denied: '不支持上传 $ext 格式的图片!',
	            duplicate:'图片(\n$file)已存在!'
	        },
	        afterFileSelect: function(){
	        	var options = { 
	                    beforeSubmit: showRequest,
	                    success: showDmzResponse_imgs,
	                    error:function(){alert('error');},
	                    url:"updatemypicUrl"
	                };
	        	$('#picForm').attr("enctype","multipart/form-data");
	        	$('#picForm').ajaxSubmit(options);
	            return false;
	            //$("#form1").submit();
	       }
	    });
	});
	
	
	function showRequest(){
	 $.blockUI({
		 message: '<img src="uploadPic" align="absmiddle"/>正在上传...',
	     css:{
		  left:'45%',
		  fontSize:'14px',
		  background:'none',
		  color: '#DC4040',
		  border:'none',
		  width:'150px'
		}
	  });
	}
	
	function showDmzResponse_imgs(responseText, statusText){
		  responseText = responseText.replace(/<head>[\s\S]+?<\/head>/g,""); 
		  responseText = responseText.replace(/<HEAD>[\s\S]+?<\/HEAD>/g,""); 
		  responseText = responseText.replace(/<[^>].*?>/g,"");   
		  responseText=responseText.replace(/(^\s*)|(\s*$)/g, ""); 
		  if(responseText=="null" || responseText.search("Too Large")>0||responseText.search("sizeErr")>=0){
			 $(".MultiFile-label:last").remove();
			 alert("请将文件大小限制在10M以内！");
		  }else if(responseText.search("typeErr")>0){
			  $(".MultiFile-label:last").remove();
			  alert("文件类型选择错误！");
		 }else{
			 //清空文件域
			 var file = $("#upload_images");  
			 file.after(file.clone().val(""));  
			  file.remove();  
			  $("#certificate").attr("value",responseText);
		 }
		 $('#picForm').attr("enctype","application/x-www-form-urlencoded");
		 showInstru('upload_images','可上传格式为${UPLOAD_IMG}的文件');
		 $.unblockUI();
	}

上面是图片上传的js代码,是在点击选择文件后通过ajax上传.然后将返回的文件位置转换后存入certificate,所以根据这个,将file文件选择框放到ajaxfrom的from表单外面,再将certificate放入要异步提交的ajax表单中..传输成功