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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
vue-cli随机生成port源码的方法
Sep 02 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python爬虫爬取微博评论案例详解
2019/03/27 Python
python opencv实现简易画图板
2020/08/27 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
大学军训感言
2014/01/10 职场文书
银行批评与自我批评
2014/02/10 职场文书
普通话宣传标语
2014/06/26 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
公司离职证明范本
2014/10/17 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
从事会计工作年限证明
2015/06/23 职场文书
正规欠条模板
2015/07/03 职场文书
小学班主任心得体会
2016/01/07 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang