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/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>

方式二:$.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插件ajaxFileUpload.js，该方式提交时无需表单, 也提交不了表单, 只用于文件上传

若在文件上传同时还要传递其它的参数,通过设置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/javascript" src="..省略/jquery.js"></script>

	<script type="text/javascript" src="..省略/ajaxfileupload.js"></script>

	<script>

		$("#uploadFile").click(function(){

			var value = $("#imageInput").val();

			if(Utils.isEmpty(value)){

				alert("请选择文件");

				return false;

			}

			if(!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){

				alert("文件格式错误");

				return false;

			}

			$.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" id="imageInput" name="imageVo.image"/>

 	          <input type="button" value="上传" id="uploadFile"/>

  </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/javascript"	src="jquery.1.8.2.min.js"></script>

		<script type="text/javascript"	src="jquery.form.js"></script>

    </head>

    <body>

         <!-- 包含文件和普通数据的表单 -->      

         <form id="form0" method="post" action="" enctype="multipart/form-data">

              姓名: <input type="text" name="userInfo.userName" autocomplete="off"/>

              头像: <input type="file" name="imageVo.image" id="pic" />    

                   <input type="button" value="提交" onclick="ajaxSubmitForm();"/>   

         </form>

    </body>

    <script>

        function ajaxSubmitForm() {

            var value = $("#pic").val();

            if (Utils.isEmpty(value)) {

                alert("请先选择文件");

                return false;

            }

            if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {

                alert("文件格式错误");

                return false;

            }

            var option = {

                url : '..省略/uploadOrgPic.ac',

                type : 'POST',

                dataType : 'json',

                headers : {"ClientCallMode" : "ajax"}, //添加请求头部

                success : function(data) {

                    alert(JSON.stringify(data));

                },

                error: function(data) {

                    alert(JSON.stringify(data) + "--上传失败,请刷新后重试");

                }

             };

            $("#form0").ajaxSubmit(option);

            return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交

        }

     </script>

</html>

ajax提交表单、ajax实现文件上传的更多相关文章

  1. Ajax 提交表单【包括文件上传】

    利用js插件实现 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></ ...

  2. JavaScript实现form表单的多文件上传

    form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...

  3. 【ASP.NET Web API教程】5.3 发送HTML表单数据：文件上传与多部分MIME

    原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...

  4. 通过jQuery Ajax提交表单数据时同时上传附件

    1.使用场景:需要使用ajax提交表单,但是提交的表单里含有附件上传 2.代码实现方式: <!-- HTML代码 --> <form method="post" ...

  5. 基于hi-nginx的web开发（python篇）——表单处理和文件上传

    hi-nginx会自动处理表单,所以,在hi.py框架里,要做的就是直接使用这些数据. 表单数据一般用GET和POST方法提交.hi-nginx会把这些数据解析出来,放在form成员变量里.对pyth ...

  6. (27) java web的struts2框架的使用-基于表单的多文件上传

    和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...

  7. form表单系列中文件上传及预览

    文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...

  8. (转)WebApi发送HTML表单数据：文件上传与多部分MIME

    5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...

  9. WebApi发送HTML表单数据：文件上传与多部分MIME

    5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...

  10. 学习SpringMVC必知必会（7）~springmvc的数据校验、表单标签、文件上传和下载

    输入校验是 Web 开发任务之一,在 SpringMVC 中有两种方式可以实现,分别是使用 Spring 自带的验证 框架和使用 JSR 303 实现, 也称之为 spring-validator 和 ...

随机推荐

  1. Apache服务器安装-apache已经卸载，如何删除注册在系统的服务

    cmd进入windows的命令行客户端,执行:sc delete apache 注意:以管理员的身份删除,同理,此方法也可以删除其他类似的服务.例如sc delete MongoDB.

  2. UVA - 11270 轮廓线DP

    其实这题还能用状压DP解决,可是时间达到2000ms只能过掉POJ2411.状压DP解法详见状压DP解POJ2411 贴上POJ2411AC代码 : 2000ms 时间复杂度h*w*(2^w)*(2^ ...

  3. Activity的生命周期& 启动模式

    1.Activity的生命周期 生命周期这个事情,是android工程师最基础的知识,所以今天要讲的是一些不一样的东西. 1.1 OnStart,OnResume,OnPause,OnStop 他们的 ...

  4. Photoshop 样式的角度/高度选择器控件

    Conmajia © 2012 Updated on Mar. 5, 2018 简介 Adobe Photoshop有两个非常专业的控件:角度选择器和角度与高度选择器,如图1所示. 图1 两种控件外观 ...

  5. wpf通过VisualTreeHelper找到控件内所有CheckBox和TextBox并做相应绑定

    #region CheckBox与TextBox绑定 Dictionary<CheckBox, TextBox> CheckTextBoxDic = new Dictionary<C ...

  6. NLP+句法结构（三）︱中文句法结构（CIPS2016、依存句法、文法）

    摘录自:CIPS2016 中文信息处理报告<第一章 词法和句法分析研究进展.现状及趋势>P8 -P11 CIPS2016> 中文信息处理报告下载链接:http://cips-uplo ...

  7. 10种软件开发中 over-engineering 的错误套路

    别把「不要过度使用 Generic」误解成「不用 Generic」,也别把「不要写一些不必要的 Wrapper」误解成「不写任何 Wrapper」.我只是在讲 over-engineering 这个事 ...

  8. Flex中通过RadioButton进行切换

    1.页面切换 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=& ...

  9. Excel 2010高级应用-气泡图（八）

    Excel 2010高级应用-气泡图(八) 基本操作如下: 1.新建空白文档,并命名为气泡图,找到插入中的气泡图样 2.在其他图表中找到气泡图图样 3.单击气泡图图样,生成空白气泡图框 4.在气泡图图 ...

  10. freemarker定义一个连续的序列

    freemarker定义一个连续的序列 1.简易说明 定义一个连续的序列,并打印出序列中的元素 2.实现源码 <#--freemarker定义了一个连续的序列--> <#assign ...