JQuery异步提交表单与文件上传功能示例


Posted in Javascript onJanuary 12, 2017

本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考,具体如下:

Jquery.form.js是一个可以异步提交表单及上传文件的插件。

示例如下:

index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript" language="javascript" src="js/jquery.form.js"></script>
  <script type="text/javascript" language="javascript">
    $(function(){
      //异步提交表单
      $("#ajaxSubmit").on("click",function(){
        console.log($(this));
        $("#formToUpdate").ajaxSubmit({
          type:'post',
          url:'p.php',
          success:function(data){
            console.log(data);
          },
          error:function(XmlHttpRequest,textStatus,errorThrown){
            console.log(XmlHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
          }
        });
      });
    });
  </script>
</head>
<body>
<form id="formToUpdate" method="post" action="#" enctype="multipart/form-data">
  <input type="text" name="t1"><br />
  <input type="file" name="f1"><br />
  <input id="ajaxSubmit" type="button" value="异步提交">
</form>
</body>
</html>

p.php

<?php
/**
 * Created by JetBrains PhpStorm.
 * User: smeoi
 * To change this template use File | Settings | File Templates.
 */
echo '<pre>';
print_r($_POST);
echo '</pre>';
echo '<pre>';
print_r($_FILES);
echo '</pre>';

效果图:

JQuery异步提交表单与文件上传功能示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
vue select组件的使用与禁用实现代码
Apr 10 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
jQuery命名空间与闭包用法示例
Jan 12 #Javascript
jquery实现百叶窗效果
Jan 12 #Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 #Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 #Javascript
js仿搜狐视频记录片列表展示效果
May 30 #Javascript
原生js实现商品放大镜效果
Jan 12 #Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 #Javascript
You might like
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php中{}大括号是什么意思
2013/12/01 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
javascript操作css属性
2013/12/30 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
JsChart组件使用详解
2018/03/04 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
对python list 遍历删除的正确方法详解
2018/06/29 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python让函数不返回结果的方法
2020/06/22 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
文明青少年标兵事迹材料
2014/01/28 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
2016春节慰问信范文
2015/03/25 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
信用卡催款律师函
2015/05/27 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
超级详细实用的pycharm常用快捷键
2021/05/12 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL