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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
VUE递归树形实现多级列表
Jul 15 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可逆加密/解密函数分享
2012/09/25 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP反射机制用法实例
2014/08/28 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
javascript中的正则表达式使用详解
2015/08/30 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
深入理解Django的中间件middleware
2018/03/14 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
对python:print打印时加u的含义详解
2018/12/15 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
会计自我鉴定
2013/11/02 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
琅琊山导游词
2015/02/05 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
Python if else条件语句形式详解
2022/03/24 Python