zoukankan      html  css  js  c++  java
  • 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

    ---恢复内容结束---

  • 相关阅读:
    [转]对Lucene PhraseQuery的slop的理解
    Best jQuery Plugins of 2010
    15 jQuery Plugins To Create A User Friendly Tooltip
    Lucene:基于Java的全文检索引擎简介
    9 Powerful jQuery File Upload Plugins
    Coding Best Practices Using DateTime in the .NET Framework
    Best Image Croppers ready to use for web developers
    28 jQuery Zoom Plugins Creating Stunning Image Effect
    VS2005 + VSS2005 实现团队开发、源代码管理、版本控制(转)
    禁止状态栏显示超链
  • 原文地址:https://www.cnblogs.com/kingkangstudy/p/6528192.html
Copyright © 2011-2022 走看看