编程 Javascript

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程序设计有所帮助。

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

- Author -

lx_3278@126

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

(function($){...})(jQuery)的意思

Jul 22 Javascript

js操作输入框提示信息且响应鼠标事件

Mar 25 Javascript

Web表单提交之disabled问题js解决方法

Jan 13 Javascript

node.js中的forEach()是同步还是异步呢

Jan 29 Javascript

不想让浏览器运行javascript脚本的方法

Nov 20 Javascript

Bootstrap表单组件教程详解

Apr 26 Javascript

JS修改地址栏参数实例代码

Jun 14 Javascript

jQuery Mobile和HTML5开发App推广注册页

Nov 07 Javascript

Three.js利用性能插件stats实现性能监听的方法

Sep 25 Javascript

浅谈Vue.nextTick 的实现方法

Oct 25 Javascript

微信小程序实现的点击按钮弹出底部上拉菜单功能示例

Dec 20 Javascript

Vue封装全局过滤器Filters的步骤

Sep 16 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