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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JS将unicode码转中文方法
May 08 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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中余数、取余的妙用
2015/06/29 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
PHP7 新增常量
2021/03/09 PHP
javascript的事件描述
2006/09/08 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python安装pil库方法及代码
2019/06/25 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python实现一个论文下载器的过程
2021/01/18 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
人事代理委托书
2014/09/27 职场文书
三八节活动简报
2015/07/20 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
python 如何做一个识别率百分百的OCR
2021/05/29 Python