---恢复内容开始---

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表单提交,含多种数据上传的更多相关文章

  1. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  2. Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

  3. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  4. Linux curl 模拟form表单提交信息和文件

    Linux curl 模拟form表单提交信息和文件   curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大 ...

  5. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  6. jquery模拟form表单提交并新打开页面

    /** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...

  7. Yii2表单提交(带文件上传)

    今天写一个php的表单提交接口,除了基本的字符串数据,还带文件上传,不用说前端form标签内应该有这些属性 <form enctype="multipart/form-data&quo ...

  8. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  9. AJAX 实现form表单提交

    1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...

随机推荐

  1. 利用Azure嵌套虚拟化,解决公有云上机器不能启动的问题

    很多时候我们都会碰到因为意外重启,机器硬盘被损坏导致无法启动,或者是因为各种原因Windows上的RDP服务启动不了,Linux上的SSH无法链接等等问题.碰到这种问题基本上很难解决以前都是将VHD下 ...

  2. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(1)

    最近使用vscode比较多. 学习了一下如何在mac上使用vscode开发asp.netcore项目. 这里是我写的关于vscode的一篇文章: https://www.cnblogs.com/cgz ...

  3. Entity Framework——配置文件设置

    可以使用配置文件或代码(EF6起)配置EF框架. 一.使用配置文件 安装Entity Framework自动生成的配置 当使用VS的NuGet自动安装Entity Framework(本文使用6.2. ...

  4. Opencv 330 如何進行圖像的旋轉?

    //圖像旋轉 cv::Mat Transformation(cv::Mat src,int angle) { cv::Mat dst = src.clone(); //中心点 cv::Point ce ...

  5. Acm弱校奋斗史

    我也是来自弱校的,没有教练,甚至老师都不理我们这种Acmer.看完这篇文章感触颇深. 原文链接 http://acmicpc.info/archives/369 原文 题解:还记得2年前的一个晚上,我 ...

  6. 20170109| javascript记录

    1.时间戳的使用: 在php中的时间戳是以秒为单位的,在js中转换过来的时间戳是以毫秒为单位的.当我们使用js和php同时开发的时候,就需要保证它们都是处于同一时间单位下才好进行相关的计算. 首先说一 ...

  7. linux链接

    ( 1 )软连接可以跨文件系统,硬连接不可以 ( 2 )硬连接不管有多少个,都指向的是同一个 I 节点,会把结点连接数增加,只要结点的连接数不是 0 ,文件就一直存在不管你删除的是源文件还是连接的文件 ...

  8. Caused by:java.sql.SQLException:ORA-00923

    1.错误描述 Caused by:java.sql.SQLException:ORA-00923:未找到要求的FROM关键字 2.错误原因 拼接SQL语句时缺少FROM什么表,导致出错 3.解决办法 ...

  9. Django学习-5-模板渲染

    1. {{ 变量名 }}                          def func(request):                     return render(request, ...

  10. ACM1008

    题目:Haab日历和Tzolkin日历的转换. Maya一共有两种日历,第一种日历名为Haab,将一年分为365天,一共有19个月.其中前18个月,分别命名为pop.nozip.zotz.tzec.x ...