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

---恢復內容結束---


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM