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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
javascript的几种写法总结
Sep 30 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
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
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
取得父标签
2006/11/14 Javascript
摘自启点的main.js
2008/04/20 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Python制作爬虫抓取美女图
2016/01/20 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
英文求职信结束语大全
2013/10/26 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年少先队工作总结
2014/12/03 职场文书
李强感恩观后感
2015/06/17 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书