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 > 0){ HttpPostedFile file = request.Files[0]; }
这个功能的实现可以实现如:一个页面注册时上传用户图像等情形,当然是用Form表单也可以实现。
另外,一些ajax提交表单、ajax实现文件上传的实现,可参考:
http://www.cnblogs.com/dmyao/p/5057274.html
---恢复内容结束---
本文原创作者:古道瘦西风,转载请注明原文链接:https://www.cnblogs.com/kingkangstudy/p/6528192.html