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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
js函数调用的方式
May 06 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
python单例模式实例分析
2015/04/08 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python计算无向图节点度的实例代码
2019/11/22 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
中层干部竞聘演讲稿
2014/05/15 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
教师工作表现评语
2014/12/31 职场文书
领导参观欢迎词
2015/01/26 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
公安机关起诉意见书
2015/05/20 职场文书
趣味运动会口号
2015/12/24 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers