JQuery異步提交表單與文件上傳功能示例
更新時(shí)間：2017年01月12日 09:53:34 作者：lx_3278@126
這篇文章主要介紹了JQuery異步提交表單與文件上傳功能,結(jié)合實(shí)例形式分析了jQuery表單提交及文件傳輸操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JQuery異步提交表單與文件上傳功能。分享給大家供大家參考，具體如下：
Jquery.form.js是一個(gè)可以異步提交表單及上傳文件的插件。
示例如下：
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擴(kuò)展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery增加、刪除及修改select option的方法
這篇文章主要介紹了jQuery增加、刪除及修改select option的方法,涉及jQuery針對(duì)form表單中select選項(xiàng)的常見(jiàn)操作技巧,需要的朋友可以參考下2016-08-08
Jquery解析json字符串及json數(shù)組的方法
這篇文章主要介紹了Jquery解析json字符串及json數(shù)組的方法,實(shí)例分析了jQuery操作json格式字符串與數(shù)組的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)懸停背景翻轉(zhuǎn)的黑色導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)懸停背景翻轉(zhuǎn)的黑色導(dǎo)航菜單代碼,涉及jQuery鼠標(biāo)事件結(jié)合animate動(dòng)畫實(shí)現(xiàn)背景翻轉(zhuǎn)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery $.extend()用法,需要的朋友可以參考下2014-06-06
jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼,可實(shí)現(xiàn)幻燈片切換顯示時(shí)標(biāo)題同步逐個(gè)打印顯示的效果,涉及jQuery操作json格式數(shù)據(jù)及時(shí)間函數(shù)的相關(guān)技巧,需要的朋友可以參考下2015-11-11
本篇文章主要是對(duì)jquery.cookie的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jQuery 1.9.1源碼分析系列（十四）之常用jQuery工具
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十四）之常用jQuery工具的相關(guān)資料,需要的朋友可以參考下2015-12-12
jquery ajax 檢測(cè)用戶注冊(cè)時(shí)用戶名是否存在
當(dāng)用戶注冊(cè)需要知道這個(gè)用戶名是否被人使用所以需要在用戶登陸前判斷為了使用戶得到更好的體驗(yàn)，我們使用了jquery的ajax效果，來(lái)用戶名是否存在。2009-11-11
分享一款基于jQuery在線問(wèn)卷答題系統(tǒng)代碼是一款實(shí)用的jQuery答題插件，點(diǎn)擊下一題切換帶有淡入淡出效果。2015-04-04
jQuery中(function(){})()執(zhí)行順序的理解
function的順序是這樣的：先計(jì)算第一個(gè)小括號(hào)，發(fā)現(xiàn)里面的表達(dá)式是一個(gè)函數(shù)，返會(huì)該匿名函數(shù)的引用（指針），最后一個(gè)括號(hào)則是建立匿名函數(shù)的實(shí)參和并執(zhí)行，感興趣的你可以參考下本文2013-03-03