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表单提交，含多种数据上传

最新文章

热门文章