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 相关文章推荐
浅谈JS日期(Date)处理函数
Dec 07 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
RxJS的入门指引和初步应用
Jun 15 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
JavaScript实现简单计时器
Jun 22 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 采集心得技巧
2009/05/15 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
python中的yield使用方法
2014/02/11 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python模块future用法原理详解
2020/01/20 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
爱的教育观后感
2015/06/17 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python