在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. 《Linux内核精髓：精通Linux内核必会的75个绝技》目录

    1章 内核入门HACK #1 如何获取Linux内核HACK #2 如何编译Linux内核HACK #3 如何编写内核模块HACK #4 如何使用GitHACK #5 使用checkpatch.pl检 ...

  2. SpringBoot入门篇--Thymeleaf引擎模板的基本使用方法

    我们在使用SpringBoot框架的时候在前面已经介绍了Thymelea引擎模板,因为SpringBoot对JSP惨不忍睹的支持.那我们在使用引擎模板对前端页面进行渲染能够返回的情况下我们怎么才能在静 ...

  3. Oracle导出DMP文件的两种方法

    本文转载自:http://www.cnblogs.com/o-andy-o/archive/2013/06/05/3118611.html   导出: 方法一:利用PL/SQL Developer工具 ...

  4. dos批处理文件中的变量小结

    很多情况下我们需要用到一些批处理文件中的变量,方便我们执行一些操作,这里简单整理下,方便需要的朋友   批处理中的变量,我把他分为两类,分别为"系统变量"和"自定义变量& ...

  5. WGCNA 分析

    https://www.jianshu.com/p/f80de3468c04 https://mp.weixin.qq.com/s/-DthUKY2RTY6vxtxapzLkw https://www ...

  6. snmp简单识记

    免费snmp探测 http://webluker.com/webtools/snmp snmp简单网络管理协议(simple network management protocol)前身时sgmp简单 ...

  7. windows安装python运行环境使用pycharm

    pycharm下载地址: https://www.jetbrains.com/zh/pycharm/download/download-thanks.html 安装教程: https://blog.c ...

  8. IP 别名和辅助 IP 地址

    https://blog.csdn.net/xiewen99/article/details/54729112?utm_source=itdadao

  9. node 把前台传来的base64码转成图片存放

    最近做个人网站头像修改用到了,在做头像修改,先做了一个图片切割,只需要上传你选中部分, 如图 这种需求 应该还是会遇到的, http://pan.baidu.com/s/1boVkn1t 这是裁剪图片 ...

  10. LiveBinding应用 dataBind 数据绑定

    http://blog.csdn.net/embarcaderochina/article/details/50352193 firemonkey grid/listview dataBind,数据绑 ...