ajax提交表单、ajax实现文件上传(multipart/form-data)

1548年前 (2017-02-17)javaScript3930

方式一：利用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/javascript" src="..省略/jquery.1.8.2.min.js"></script>	
	<script>
		$(function(){
				//值得注意的是iframe会维护浏览器的历史,浏览器的后退/前进将根据ifream的访问历史来变化,而非主页面
				$("#btn").click(function(){
					var value = $("#pic").val();
					if(Utils.isEmpty(value)){
						alert("请选择文件");
						return false;
					}
					if(!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){ 
						alert("文件格式错误"); 
						return false;
					}
					$("#form0").submit(); 
				});  
		});    
	</script>
  </head>

  <body>         
    <form id="form0" method="post" action="..省略/uploadOrgPic.html" enctype="multipart/form-data" target="hiddenFrame" >
    	上传头像: <input type="file" name="imageVo.image" id="pic" />    
    	          <input type="button" value="提交" id="btn"/>   
    </form>
    <div id="result"></div>
     
    <iframe src="about:bland;" id="hiddenFrame" name="hiddenFrame" style="display:none;" frameborder="0"></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>