在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. win10安装.net framework3.5

    win10默认没有安装.net framework3.5,一般方法需提取Windows安装镜像,麻烦. 离线安装方法如下: cab格式.NET Framework 3.5离线安装包下载地址:百度网盘 ...

  2. DOS中判断进程是否存在的方法

    这里分享的主要是通过批处理中先判断进程是否存在,然后再做出操作的实现代码,需要的朋友可以参考下   检测进程是否存在,并做出预定动作. tasklist /nh>d:\tddown~1\1.tx ...

  3. Executor框架（四）周期/延时任务ScheduleThreadPoolExecutor

    ScheduledThreadPoolExecutor 介绍   ScheduledThreadPoolExecutor 是一个可以实现定时任务的 ThreadPoolExecutor(线程池).比 ...

  4. jar包双击执行引用外部包问题

    大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个jar包的程序入口. 具体的方法是修改jar包内目录META-INF下的MANIF ...

  5. 0_Simple__simpleP2P

    使用 P2P 特性在 GPU 之间传输.读写数据. ▶ 源代码.包括 P2P 使用前的各项检查,设备之间的数据互拷,主机和设备之间数据传输和相互访问. #include <stdlib.h> ...

  6. MVC 4 Razor Design Sample Demo Project

    This is a demo project in MCV 4 razor design which encompases the general design of MVC pattern. The ...

  7. 1. java获取本周日-本周六的时间

    Calendar calendar = Calendar.getInstance(); String[] arrDate = new String[5]; String[] arrWeek = new ...

  8. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  9. css之为文本添加线性渐变和外描边

    css之为文本添加线性渐变和外描边  一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...

  10. random内置模块

    import random random.random() #生成0-1的随机浮点数 random.randint(1, 10) #生成1-10的整数 random.randrange(1,10) # ...