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