在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. tensorflow函数学习：队列和线程

    队列函数: FIFOQueue和RandomShuffleQueue 1.FIFOQueue FIFOQueue是先进先出队列,主要针对序列样本.如:使用循环神经网络时,需要处理语音.文字.视频等序列 ...

  2. ElasticSearch Document API

    删除索引库 可以看到id为1的索引库不见了 这里要修改下配置文件 slave1,slave2也做同样的操作,在这里就不多赘述了. 这个时候记得要重启elasticseach才能生效,怎么重启这里就不多 ...

  3. css (具体代码看笔记本)

    参考:https://www.cnblogs.com/liwenzhou/p/7999532.html  1. CSS语法   选择器 {属性1:值1;...;}  2. CSS导入方式   1. 行 ...

  4. scrapy与redis分布式组件

    Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架,但是不支持分布式,Scrapy-redis是为了更方便地实现Scrapy分布式爬取,而提供了一些以redis为基础 ...

  5. [Flutter] TextField 中只允许输入合法的小数

    的Flutter的TextField中,我们可以通过设置inputFormatters来过滤和限制输入的内容. 下面是一个自定义的 TextInputFormatter,可以限制用户只能输入有效的整数 ...

  6. Django静态图片参数解析

    使用Django静态设置时,遇到很多问题,经过艰苦的Baidu, stack overflow, Django原档阅读,终于把静态图片给搞出来了.特记录下来. 关键的概念:Django中,静态资源的存 ...

  7. 0_Simple__simpleZeroCopy

    两种方法使用零拷贝内存做简单的向量加和,并评估 GPU 计算结果与 CPU 计算结果的差. ▶ 源代码 #include <stdio.h> #include <cuda.h> ...

  8. Code First use dotConnect for MySQL

    http://www.dotblogs.com.tw/yc421206/archive/2014/03/24/144507.aspx dotConnect for MySQL 是一家強大的 3rd C ...

  9. 【转】Ultra simple ISO-7816 Interface

    原文出自 http://hilbert-space.de/?p=135 While laying out a PCB for my SWP reader project I realized that ...

  10. Jsch - java SFTP 文件上传下载

    使用Jsch上传.下载文件,核心步骤是:获取channel,然后使用get/put方法下载.上传文件 核心代码句: session = jSch.getSession(ftpUserName, ftp ...