Ajax模拟Form表单提交,含多种数据上传
---恢复内容开始---
Ajax提交表单、使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取)
有时候前台的数据提交到后台,不想使用form表单上传,希望通过Ajax上传,那么怎么实现呢?
前台页面:
<div>
<table id="outputInfo">
<tr><td>Client</td><td><input id='ClientName' type='text'></td></tr>
<tr><td>CropID</td><td><input id='CropID' type='text' /></td></tr>
<tr><td>Secret</td><td><input id='Secret' type='text'/></td></tr>
<tr><td>AppID</td><td><input id='AppID' type='text'/></td></tr>
<tr><td>Logo</td><td><input id='Logo' type='file'/></td></tr>
</table>
</div>
<button id="saveInfo">Save</button>
JS代码:
$("#saveInfo").click(function () {
var clientName = $("#ClientName").val();
var CropID = $("#CropID").val();
var Secret = $("#Secret").val();
var AppID = $("#AppID").val();
var formData = new FormData();
alert(clientName);
formData.append("file", document.getElementById("Logo").files[0]);
formData.append("clientName", clientName);
formData.append("CropID", CropID);
formData.append("Secret", Secret);
formData.append("AppID", AppID);
$.ajax({
url: "上传地址",
data: formData,
type: "POST",
contentType: false,//这里
processData: false,//这两个一定设置为false
success: function (info) {
if (info == "success") {
alert("成功上传");
} else {
alert(info);
}
}
});
});
那么在后台接收使用(这里使用C# 代码实现的,Java代码也一样的道理实现):
HttpRequest request = HttpContext.Current.Request;
//获取到前台的ClientName
string ClientName = request.Params["clientName"];
//获取前台的CropID
string CropID = request.Params["CropID"];
//获取前台的Secret
string Secret = request.Params["Secret"];
//获取前台的AppID
string APPID = request.Params["AppID"];
//获取前台上传的文件
if (request.Files.Count > ){
HttpPostedFile file = request.Files[];
}
这个功能的实现可以实现如:一个页面注册时上传用户图像等情形,当然是用Form表单也可以实现。
另外,一些ajax提交表单、ajax实现文件上传的实现,可参考:
http://www.cnblogs.com/dmyao/p/5057274.html
---恢复内容结束---
Ajax模拟Form表单提交,含多种数据上传的更多相关文章
- js_ajax模拟form表单提交_多文件上传_支持单个删除
需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...
- Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)
一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...
- ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传
最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...
- Linux curl 模拟form表单提交信息和文件
Linux curl 模拟form表单提交信息和文件 curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大 ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...
- Yii2表单提交(带文件上传)
今天写一个php的表单提交接口,除了基本的字符串数据,还带文件上传,不用说前端form标签内应该有这些属性 <form enctype="multipart/form-data&quo ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
- AJAX 实现form表单提交
1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...
随机推荐
- js闭包面试题目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Date 类 02
Date类 在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date ...
- HDU - 1175 bfs
思路:d[x][y][z]表示以z方向走到(x, y)的转弯次数. 如果用优先队列会超时,因为加入队列的节点太多,无用的节点不能及时出队,会造成MLE,用单调队列即可. AC代码 #include & ...
- nyoj888 取石子(九) 反Nimm博弈
这题就是反Nimm博弈--分析见反Nimm博弈 AC代码 #include <cstdio> #include <cmath> #include <algorithm&g ...
- Java中的自定义数组队列
在Java中,作为所有数据结构中存储和获取速度最快的一种,数组凭借其这种简单易用的优势在各个方面都能大显神威.但是数组也有自身的局限性.数组的长度必须是固定的一旦定义之后就无法动态的更改,这就会造成这 ...
- java的mac自动化-自动运行java程序
本文旨在帮助读者介绍,如果一个测试工程师拿到了mac本,该如何在本地自动运行java代码 首先如图所示写下如下一段代码 package zlr;import org.junit.Test;public ...
- nginx启动停止
nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件 nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否 ...
- R实践 第二篇:创建数据集
准备数据是数据分析的第一步,由数据构成集合,我们称作数据集,数据集的结构是行列式的,行表示观测,列表示变量.把数据读入到R中,转换为合适的数据结构,能够提高数据分析的效率.在数据分析中,常用的存储数据 ...
- 我的Java设计模式-策略模式
今天给大家说说田忌赛马的故事.如有雷同,纯属巧合!话说在战国时期,群雄割据,硝烟四起,茶余饭后还是少不了娱乐活动的,其中赛马是最火爆的.一天,孙膑看到田忌像个死鸡似的就知道肯定赛马又输给了齐威王,立马 ...
- ios学习- 10大iOS开发者最喜爱的类库
该10大iOS开发者最喜爱的库由“iOS辅导团队”成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个最好的库: 1)不能 ...