JQuery異步提交表單與文件上傳功能示例

更新時間：2017年01月12日 09:53:34 作者：lx_3278@126

這篇文章主要介紹了JQuery異步提交表單與文件上傳功能,結(jié)合實例形式分析了jQuery表單提交及文件傳輸操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了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>';

效果圖：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery文件與目錄操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

使用jQuery加載html頁面到指定的div實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
利用浮層使select不可選的實現(xiàn)方法
下面小編就為大家?guī)硪黄酶邮箂elect不可選的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-12-12
使用jQuery避免鼠標雙擊的解決方案
用戶雙擊DOM對象（例如按鈕和鏈接等）時，對于用戶交互一直是個麻煩的問題，如果你的元素點擊事件不止觸發(fā)一次，可以參考以下的解決方案
2013-08-08
jquery無刷新驗證郵箱地址實現(xiàn)實例
原理非常的簡單在用戶輸入郵箱離開之后我們通用jquery ajax發(fā)送數(shù)據(jù)給mail.php文件，然后由它實現(xiàn)查找此郵箱是不是在數(shù)據(jù)庫中然后反饋對應信息即可
2014-02-02
jquery表格datatables實例解析直接加載和延遲加載
這篇文章主要針對jquery表格datatables實例進行解析，可以直接加載和延遲加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
jquery實現(xiàn)圖片自動輪播效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片自動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
jquery+springboot實現(xiàn)文件上傳功能
這篇文章主要為大家詳細介紹了jquery+springboot文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
ASP.NET MVC中EasyUI的datagrid跨域調(diào)用實現(xiàn)代碼
因為easyUI使用的是JQuery的異步方法加載數(shù)據(jù)，應該遵循JQuery的跨域訪問規(guī)則
2012-03-03
jQuery搜索同輩元素方法
這篇文章主要介紹了jQuery搜索同輩元素方法,實例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并給出了一個完整的實例進行了總結(jié)歸納,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好，支持更改提示內(nèi)容，支持定位提示框的位置，可配置插件參數(shù)。
2015-05-05