ajax提交带文件的表单

前端之家收集整理的这篇文章主要介绍了ajax提交带文件的表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在做项目的时候遇到一个问题,在导入excel的时候导入出现的错误信息如何处理的问题。首先,交代一下前提:该导入功能没有使用事务控制,即不是成功或者不成功二选一。而是只要数据符合要求就导入,错误数据不导入提示用户修改

逻辑上说,只要导入出现了导入不成功的数据,就需要打回到导入页面。即回到用户的操作原点,并将错误信息呈现给用户。所有数据都导入成功时才转到list页面,并提示成功。

问题描述

那么问题是当以一般的形式提交表单时,经过处理后的信息输出到了一个空白的只有错误信息的页面。即覆盖掉了用户的操作原点。并且界面风格也是很不匹配。

解决思路

为了能让出现错误信息呈现在导入数据页面,所以想到了使用ajax。ajax可以不刷新页面,那么我就能把错误信息打回到导入数据页面

实现

利用jquery的ajax提交表单,代码如下:

function submitForm() {
		var options={
			  type:"post",url:"${ctx}baseinfo/userinfo!importData.action",async: false,enctype:"multipart/form-data",iframe:true,dataType:"Text",error:function(data){
                    alert(data);
		          },success:function(msg){
	        	var arrs = msg.split("|");
				switch(parseInt(arrs[0])){
				case 1:
					document.getElementById("resultMsg").innerHTML=arrs[1];
					break;
				case 2:
					document.location.href = "${ctx}" + arrs[1];
					break;
				default:
					alert("未知错误请联系管理员!");	
				}                  
              }
        };
		var upload = $('#upload').val();
		if (upload.length == 0) {
			alert("上传文件不能为空!");
			return false;
		} else {
			return $('#frmServices').ajaxForm(options);
		}
	}


需要引入jquery的js文件jquery-1.10.2.min.js、jquery.form.js、jquery.MultiFile.js其中min.js需要1.5版本

小结:jquery的ajax中可用$('#yourformid').serialize()将表单中的数据都转化成:key1=value1&key2=value2但是这种方式无法提交带上传文件的数据。以上这种方式才可以将文件提交过去以后才支持

猜你在找的Ajax相关文章