如何使用 asp.net WebMethod 处理 FormData AJAX 帖子（带有附加参数的文件）答案

【问题标题】：How to handle FormData AJAX post (file with additional params) with asp.net WebMethod如何使用 asp.net WebMethod 处理 FormData AJAX 帖子（带有附加参数的文件）
【发布时间】：2013-07-27 04:03:54
【问题描述】：

在将 FormData 的 jQuery AJAX 发布到 ASP.net 4 Web 服务 WebMethod 时遇到问题。

<input id="ipt_file" type="file" />
<a href='#' onclick="UploadFile();" data-role='button'>Upload</a>

var UploadFile = function () {
    var file_object = $('#ipt_file')[0].files[0];
    var form_data = new FormData();
    form_data.append('job_id', '123456');
    form_data.append('job_name', 'xyx');
    form_data.append('job_file', file_object);

    var xhr_upload = $.ajax({
        type: "POST",
        headers: { "Cache-Control":"no-cache", "Content-Type":"multipart/form-data" }, // also tried without these
        url: "../MyServices.asmx/Upload",
        data: form_data,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function (msg) {
            if (typeof (msg) === "object") {
                var _upload = $.parseJSON(msg.d);
                alert(_upload.status + ': ' + _upload.msg);
            };
        }
    });
};

public class FileUploadRequest
{
    public string job_id { get; set; }
    public string job_name { get; set; }
    public HttpPostedFile job_file { get; set; }
}

[WebMethod]
public string Upload(FileUploadRequest x)
{
    string str_response = string.Empty;
    if (x.job_file.ContentLength > 0)
    {
        str_response = "{\"status\":1,\"msg\":\"" + x.job_id + ", " + x.job_name + ", " + x.job_file.FileName + "\"}";
    }
    else
    {
        str_response = "{\"status\":0,\"msg\":\"FAIL"\}";
    };
    return str_response;
}

不能正确处理 FormData 对象参数；在这里我实例化了一个自定义类，但我从服务器返回的只是 500 个错误（也尝试了一个通用对象 x）。正如我在一些帖子中看到的那样，还尝试将其作为 HttpRequest 对象处理，但无济于事。在这种情况下不关心 IE 9 不兼容；只想看到单个文件上传或至少一个 FormData 对象，其中键/值对被 asmx WebMethod 正确接收。

【问题讨论】：

在这方面取得了一些进展，但将服务从 asmx 更改为 svc：见问题 18004679。

标签： asp.net jquery asmx webmethod form-data

【解决方案1】：

我确实让它与以下代码一起使用，以防万一有人想看到它：

    var upload_file = $('#ipt_file')[0].files[0];
    var upload_filename = upload_file.name;
    var upload_maxsize = 10485760;
    var upload_projectname = "test";
    var form_data = new FormData();
    form_data.append('session_id', this.sessionID());
    form_data.append('project_name', upload_projectname);
    form_data.append('file_name', upload_filename);
    form_data.append('file_size', upload_file.size);
    form_data.append('file', upload_file);
    if (upload_file.size < upload_maxsize) {
    var xhr_upload = $.ajax({
        type: "POST",
        headers: { 'Cache-Control': 'no-cache' },
        url: "../services/upload.ashx",
        data: form_data,
        processData: false,
        contentType: false,
        dataType: "json"
        }
    })
    .done(function (xhr_data) {
        ...
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        ...
    })
    .always(function () {
        ...
    });

【讨论】：

您还在使用与原始问题相同的 WebMethod 吗？如果没有，您可以发布upload.ashx的内容吗？
谢谢，让我想起了我最终做了什么。我们使用基类进行成员管理，因此我们最终为此使用了一个 aspx 文件。不过，我确实从你的文件中窃取了一些技巧，干杯！
没问题 - 很高兴它有帮助 - 我记得整个练习有点痛苦;)
我知道这是一个有点旧的线程，但你的 ashx.cs 文件看起来如何。该链接确实有任何内容。
如果你也能在后面发布工作代码，我会很高兴@brnwdrng

【解决方案2】：

.NET 不允许 multipart/form-data 用于内容类型：

JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks

ASP.NET 有一个内置的验证保护层对基于 GET 和 POST 的 ASP.NET AJAX Web 方法强制执行，其中是不管使用什么 HTTP 动词，ASP.NET 总是要求将 HTTP Content-Type 标头设置为值应用程序/json。如果不发送此内容类型标头，ASP.NET AJAX 将拒绝服务器上的请求。

【讨论】：

哇，这正是我遇到问题的原因，我无法在任何地方找到此文档。谢谢。