脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JQuery异步提交表单与文件上传

JQuery异步提交表单与文件上传功能示例

 更新时间：2017年01月12日 09:53:34   作者：lx_3278@126  
这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下

本文实例讲述了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 form操作技巧汇总》、《jQuery文件与目录操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 使用jQuery加载html页面到指定的div实现方法

    使用jQuery加载html页面到指定的div实现方法

    下面小编就为大家带来一篇使用jQuery加载html页面到指定的div实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 利用浮层使select不可选的实现方法

    利用浮层使select不可选的实现方法

    下面小编就为大家带来一篇利用浮层使select不可选的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-12-12
  • 使用jQuery避免鼠标双击的解决方案

    使用jQuery避免鼠标双击的解决方案

    用户双击DOM对象（例如按钮和链接等）时，对于用户交互一直是个麻烦的问题，如果你的元素点击事件不止触发一次，可以参考以下的解决方案
    2013-08-08
  • jquery无刷新验证邮箱地址实现实例

    jquery无刷新验证邮箱地址实现实例

    原理非常的简单在用户输入邮箱离开之后我们通用jquery ajax发送数据给mail.php文件，然后由它实现查找此邮箱是不是在数据库中然后反馈对应信息即可
    2014-02-02
  • jquery表格datatables实例解析 直接加载和延迟加载

    jquery表格datatables实例解析 直接加载和延迟加载

    这篇文章主要针对jquery表格datatables实例进行解析，可以直接加载和延迟加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jquery实现图片自动轮播效果

    jquery实现图片自动轮播效果

    这篇文章主要为大家详细介绍了jquery实现图片自动轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jquery+springboot实现文件上传功能

    jquery+springboot实现文件上传功能

    这篇文章主要为大家详细介绍了jquery+springboot文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

    ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

    因为easyUI使用的是JQuery的异步方法加载数据，应该遵循JQuery的跨域访问规则
    2012-03-03
  • jQuery搜索同辈元素方法

    jQuery搜索同辈元素方法

    这篇文章主要介绍了jQuery搜索同辈元素方法,实例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并给出了一个完整的实例进行了总结归纳,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jquery插件hiAlert实现网页对话框美化

    jquery插件hiAlert实现网页对话框美化

    hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失败和操作提醒三种信息提示方式。hiAlert浏览器兼容性非常好，支持更改提示内容，支持定位提示框的位置，可配置插件参数。
    2015-05-05

最新评论