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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JavaScript网页定位详解
Jan 13 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
Vue实现多标签选择器
Nov 28 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生成便于打印的网页
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php网页病毒清除类
2014/12/08 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python中字符串的常见操作技巧总结
2016/07/28 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python如何更新包
2020/06/11 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
最新教师自我评价分享
2013/11/12 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
CAD实训总结范文
2015/08/03 职场文书
检举信的写法
2019/04/10 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS