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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
axios基本入门用法教程
Mar 25 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
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垃圾代码优化操作代码
2010/08/05 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
物业门卫岗位职责
2013/12/28 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
节约用水标语
2014/06/11 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
羊脂球读书笔记
2015/06/30 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
一行Python命令实现批量加水印
2022/04/07 Python