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

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

  • 相关阅读:
    使用BigQuery分析GitHub上的C#代码
    ASP.NET Core 处理 404 Not Found
    C# 7 局部函数剖析
    调试 ASP.NET Core 2.0 源代码
    Entity Framework Core Like 查询揭秘
    ASP.NET Core Razor 视图组件
    Thread 1 cannot allocate new log引起的宕机事故(转载)
    docker默认网段和主机网段冲突解决
    docker安装异常以及网络问题总结
    max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144]
  • 原文地址:https://www.cnblogs.com/kingkangstudy/p/6528192.html
Copyright © 2011-2022 走看看