在html5中我们通过FormData就可以ajax上传文件数据，不过因为兼容问题。我们选用jquery.form.min.js来进行ajax的表单提交。

 
一、jquery.form.js下载地址：
http://malsup.com/jquery/form/#download
 
二、jquery.form.js提供的方法如下：
函数名 描述 参数 例子
ajaxForm() 增加所有需要的事件监听器，为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中，使用ajaxForm来为ajax提交表单进行准备。 接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。 $("#formid").ajaxForm();
ajaxSubmit() 使用ajax提交表单。 接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。 $("#formid").ajaxSubmit();
formSerialize() 将表单串行化(或序列化)为一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 无 $("#formid").formSerialize();
fieldSerialize() 将表单的字段元素串行化(或序列化)为一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，使用这个就很方便了。 返回以下格式的字符串：name=value1&name2=value2。 无 $("#formid .specialFields").fieldSerialize();
fieldValue() 返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效，则数组为空。 无 $("#formid :password").fieldValue();
resetForm() 将表单恢复到初始状态。 无 $("#formid").resetForm();
clearForm() 清除表单元素。该方法将所有的text、password、textarea置空，清除select元素中的选定，以及所有radio按钮和checkbox按钮重置为非选定状态。 无 $("#formid").clearForm();
clearFields() 清除字段元素。只有部分表单元素需要清除时方便使用。 无 $("#formid .specialFields").clearFields();
三、options对象参数：
target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串、一个jquery对象、一个DOM元素。 默认值：null
url 指定提交表单数据的URL。 默认值：表单的action属性值
type 指定提交表单数据的方法(method)："GET"或"POST"。 默认值：GET
beforeSubmit 表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。 默认值：null
success 表单成功提交后调用的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。 默认值：null
dataType 返回的数据类型：null、"xml"、"script"、"json"其中之一。 默认值：null
resetForm 表示如果表单提交成功是否进行重置。 默认值：null
clearForm 表示如果表单提交成功是否清除表单数据。 默认值：null
四、例子如下：
index.html代码如下：
<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>ajax表单处理</title>

</head>

<body>

    <form class="upForm" action="./data.php" method="post" enctype="multipart/form-data">

        <table>

            <tr>

                <td>用户名：</td>

                <td><input type="text" name="uname" /></td>

            </tr>

            <tr>

                <td>密码：</td>

                <td><input type="password" name="uname" /></td>

            </tr>

            <tr>

                <td>性别：</td>

                <td>

                    <input type="radio" name="sex" value="0" checked />男

                    <input type="radio" name="sex" value="0" />女

                </td>

            </tr>

            <tr>

                <td>证件：</td>

                <td><input type="file" name="upfile" /></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="button" value="提交" /></td>

            </tr>

        </table>

    </form>

</body>

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

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

<script type="text/javascript">

    $(function() {

        $(".upForm input[type='button']").on("click", function() {

            var options = {

                "beforeSubmit" : checkForm,

                "success" : resultForm,

                "resetForm" : true,

                "dataType" : "json"

            };

            $(".upForm").ajaxSubmit(options);

        });

        function checkForm(formData, form, options) {

            //表单提交前处理

        }

        function resultForm(data, status) {

            //表单完成

            console.log(data);

        }

    });

</script>

</html>

data.php代码如下：

<?php

var_dump($_POST);

var_dump($_FILES);
测试如下：

表单中的数据和文件成功的提交给了服务器处理。

php使用jquery Form ajax 提交表单，并上传文件的更多相关文章

  1. php 利用fsockopen GET/POST 提交表单及上传文件

    1.GET get.php <?php $host = 'demo.fdipzone.com'; $port = 80; $errno = ''; $errstr = ''; $timeout  ...

  2. php 利用 fsockopen GET/POST 提交表单及上传文件

    1.GET get.php <?php$host = 'demo.fdipzone.com';$port = 80;$errno = '';$errstr = '';$timeout = 30; ...

  3. CURL模拟表单post提交及相关常用参数的使用（包括提交表单同时上传文件）

    转载自:https://blog.csdn.net/freedomwjx/article/details/43278157 (注:在curl前面加上time如time curl xxx,可以在最后显示 ...

  4. 使用FormData提交表单及上传文件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  5. Java模拟表单POST上传文件

    JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...

  6. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  7. web 表单方式上传文件方法（不用flash插件）

    原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作 由于我测试用的做了一个上传文件和上传图片方法,所以我有 ...

  8. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  9. JAVA入门[16]-form表单，上传文件

    一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...

随机推荐

  1. WCF服务部署

    一.将WCF服务部署到IIS上 1.首先检测电脑上是否安装了IIS,一般来说Win7以上系统自带IIS 2.下面进行IIS服务的开启设置 控制面板=>打开或关闭Windos功能 3.勾选该窗口中 ...

  2. 第3课 进化后的 const分析

    1.  C语言中的const (1)const修饰的变量是只读的,使得变量具有只读属性,但本质还是变量.所以不是真正的常量,它只是告诉编译器该变量不能出现在赋值符号的左边. (2)const修饰的局部 ...

  3. OTL技术应用

    什么是OTL:OTL 是 Oracle, Odbc and DB2-CLI TemplateLibrary 的缩写,是一个操控关系数据库的C++模板库,它目前几乎支持所有的当前各种主流数据库,如下表所 ...

  4. fio与dd测试结果记录

    以下测试基于win7内安装的vbox虚机内进行. vbox-vm挂载了7.2k disk作为本地系统盘,挂载了ssd 8G空间作为mount /mnt/data /dev/sdb 今天顺便了做个一个简 ...

  5. Github入门 - Github基本使用及Github桌面版使用

    知识内容: 1.版本控制 2.Git介绍 3.Github介绍及基本使用 4.Github桌面版介绍及安装 5.Github桌面版基础使用 6.Github桌面版进阶使用 参考: http://www ...

  6. C# IIS 服务器 HTTP 错误 500.21 - Internal Server Error 解决办法

    <1> 管理员身份启动控制台 <2> 输入 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe ...

  7. HtmlRowCreated关于e.Row.Cells[0]的获取和设置

    获取采用:  cmd2.Parameters.AddWithValue("@xh", e.GetValue("学号").ToString().Trim()); ...

  8. 定时器setInterval， innerText获取文本， charAt()获取单个字符串， substring(1, content.length)获取范围内的字符串， 实现字符串的滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SpringMvc 获取ApplicationContext

    有时,我们不通过Controller层进入Service层,比如同步数据,任务,以及文件上传共通Handler对文件处理后保存数据等都会由一个非Controller类调用Service. 这时候如果n ...

  10. app.$mount("#app") 手动挂载

    $mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...