ajax提交表单、ajax实现文件上传

ajax提交表单、ajax实现文件上传，有需要的朋友可以参考下。

方式一：利用from表单的targer属性 + 隐藏的iframe 达到类似效果，支持提交含有文件和普通数据的复杂表单

方式二：使用jquery的$.ajax({..})，支持提交普通表单，但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax)

方式三：使用jquery插件ajaxFileUpload.js，支持上传文件，但不支持提交表单

方式四：使用jquery.from.js，支持提交同时含有文件和普通数据的复杂表单

个人四种都用过, 更好喜欢第二种和第四种; 用第二种来解决ajax普通请求, 用第四种来解决文件上传/表单提交; 不多说,上代码

方式一: from + iframe

Test1.jsp：表单、iframe、提交表单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html>
  <head>
    <title>测试页面1,创建表单、iframe、提交表单</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  	
	<script type="text/head>

  <body>         
    <form  >
    	上传头像: <input type="file" name="imageVo.image"  />    
    	          <input type="button" value="提交" />   
    </form>
    <div ></div>
     
    <iframe src="about:bland;" ></iframe> 
  </body>
</html>

Test2.jsp：后台处理完成后的跳转页面 (后台处理代码此处就不贴了, 上传文件相信大家都会的)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>     
    <title>测试页面2，处理结果、返回父页面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    	
    <script>
             window.onload = function(){
                  if(window.parent != window){           //检查是否存在父窗口
                        var resultDiv= window.parent.document.getElementById("result"); 
                        resultDiv.innerHTML = '因为是测试,所以简单的来这么一句话';
                  }
             }
    </script>
  </head>
  
  <body>  
  </body>
</html>

方式二:$.ajax({..})

值得注意的是: serialize()可通过序列化表单值,创建URL编码文本字符串,但不支持文件上传的表单

    $.ajax({
            url:你要请求的url链接,      //默认为当前页面url      
            aysnc:true,                //是否异步,默认true
            cache: true,               //使用缓存,默认true
            type: "POST",              //请求方式,默认Get
            dataType:'JSON',           //预期服务器返回的数据类型 (若不指定jquery将根据HTTP包MIME信息来判断)
            headers:{'ClientCallMode':'ajax'}, //添加头部,也可通过beforeSend函数添加
            data:$('#formid').serialize(),    //要发送的数据,将自动转换为请求字符串格式。 此处为表单序列化后生成的字符串
            success: function(data) {  //执行成功的回调函数
                alert("success");
            },
            error: function(request) { //执行错误的回调函数(包含三个参数:XMLHttrRequest、错误信息、捕获的异常对象)
                alert("error");                                 
            }                            
    });

方式三:使用jquery插件表单, 也提交不了表单, 只用于文件上传

若在文件上传同时还要传递其它的参数,通过设置data属性即可实现; 但如果需要的参数过多, 则不建议使用这种方式, 个人更倾向于方式四

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajaxFileUpload上传文件</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<script type="text/ajaxFileUpload({
				 url:'url', 		
                 secureuri:false,  	//是否启用安全提交,默认false
                 dataType:'JSON',  //预期服务器返回的数据类型  
                 fileElementId:'imageInput', //文件域id值
                 data:{'name':'abc'}, 		 //其它参数
                 success:function(data,status){
					 alert(data);
                 },
                 error:function(data,status,_exception){
                	 alert(_exception);
                 }
			});
		});
	</script>	
  </head>
  
  <body>
            姓名: <input type="text" name="name"/><br/>
 	上传头像: <input type="file" />
 	          <input type="button" value="上传" />
  </body>
</html>

方式四：jquery.form.js

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
	<title>ajax上传头像</title> 
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">  		
		<script type="text/表单 -->      
         <form >
              姓名: <input type="text" name="userInfo.userName" autocomplete="off"/>
              头像: <input type="file" name="imageVo.image"  />    
                   <input type="button" value="提交" onclick="dataType : 'json',
                表单自己又会提交一次;返回false阻止表单再次提交
        }
     </script>
</html>

ajax提交表单、ajax实现文件上传

相关推荐