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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 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项目中比较通用的php自建函数的详解
2013/06/06 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python3基础之函数用法
2014/08/13 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python批量修改文件名的示例
2020/09/27 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
大学生职业生涯设计书
2014/01/02 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
青春演讲稿范文
2014/05/08 职场文书
群众路线对照检查材料
2014/09/22 职场文书
计划生育工作汇报
2014/10/28 职场文书
中班下学期个人总结
2015/02/12 职场文书
联谊会开场白
2015/06/01 职场文书
后天观后感
2015/06/08 职场文书
承兑汇票延期证明
2015/06/23 职场文书
2015入党自传书范文
2015/06/26 职场文书