未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryAjax
分页:12
转载请注明
本文标题:JQuery异步提交表单与文件上传功能示例
本站链接:http://www.codesec.net/view/524460.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(32)