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 相关文章推荐
onpropertypchange
Jul 01 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 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基础学习笔记
2007/03/18 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
ThinkPHP分页实例
2014/10/15 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Javascript 实用小技巧
2010/04/07 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
npm ci命令的基本使用方法
2020/09/20 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
程序员经常用到的UNIX命令
2015/04/13 面试题
党的群众路线查摆剖析材料
2014/10/10 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android