带有id的jQuery ajax上传文件

Question

我正在使用 ASP.NET MVC5。我的目标是使用 jQuery ajax 上传文件。成功后，返回表格中已上传文件的部分视图。当我单步执行 jQuery 代码时，id 和 files 是正确的，但是当我单步执行 Action 时，这两个参数都是空的。这是我的代码：

控制器的动作：

[HttpPost]
        public ActionResult AddAttachments(string id, IEnumerable< HttpPostedFileBase> files)
        {            
            if (files != null)
            {
                //save files
            }
            var cardKey = db.CardKeys.Single(s => s.CardKeyID == Convert.ToInt32(id));
            var attachments = cardKey.Request.Attachments;
            return PartialView("_AttachmentsTable",attachments);
        }

jQuery:

$(function () {
    var table = $("#attachmentTable").DataTable();
    var path = MySettings.addAttachmentURL;
    $("#btnAddAttachment").click(function (event) {
        event.preventDefault();

        var formData = new FormData();
        var cardKeyID = $("#CardKeyID").val();

        var formData = $.each($("#files")[0].files, function (i, file) {
            formData.append('file-' + i, file);
        });
        console.log("formData = " + formData);
        $.ajax({
            type: "POST",
            url: path,
            contentType: false,
            processData:false,
            cache:false,
            data: {id:cardKeyID,files: formData },
            success: function (partialResult) {
                $("#tableData").html(partialResult);
                table = $("#attachmentTable").DataTable();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#message").html(JSON.stringify(jqXHR).toString());
                alert("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    });
});

剃刀视图：

<fieldset>
            <legend>Add Attachments</legend>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    @Html.Label("File Upload", new { @class = "control-label col-md-6" })
                    <div class="col-md-6">
                        <input type="file" id="files" name="files" multiple/><br />
                        <input type="submit" id="btnAddAttachment" value="Add Attachment"/>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    @Html.Label("File Description", new { @class = "control-label col-md-6" })
                    <div class="col-md-6">
                        @Html.TextBox("FileDescription")
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    @Html.Label("Comment", new { @class = "control-label col-md-6" })
                    <div class="col-md-6">
                        @Html.TextBox("Comment")
                    </div>
                </div>
            </div>
        </div>
        <div id="tableData">
            @Html.Partial("_AttachmentsTable",Model.Request.Attachments)
        </div>
        </fieldset>

Answer 1

问题是因为您需要将FormData 直接提供给$.ajax 的data 属性，而不是在对象中，因为它将被编码。如果您需要在请求中添加数据，请将其附加到FormData 对象：

var formData = new FormData();
var cardKeyID = $("#CardKeyID").val();
var formData = $.each($("#files")[0].files, function (i, file) {
    formData.append('file-' + i, file);
});
formData.append('id', cardKeyID);

$.ajax({
    data: formData,
    // other properties here...
});

然后在控制器中你需要直接从Request检索数据：

[HttpPost]
public ActionResult AddAttachments()
{    
    var id = Request.Params["id"];
    foreach(var file in Request.Files) {
        //save files
    }

    var cardKey = db.CardKeys.Single(s => s.CardKeyID == Convert.ToInt32(id));
    var attachments = cardKey.Request.Attachments;
    return PartialView("_AttachmentsTable",attachments);
}

请注意，如果 form 元素包含您要在请求中发送的所有字段，您可以避免使用 $.each 并且必须直接附加并简单地使用：

var formData = new FormData($('form')[0]);