Formdata多文件上传

Question

我的表格

@using (Html.BeginForm("ViewProjectAssignment", "AssignmentOfProject", FormMethod.Post, new { enctype = "multipart/form-data", @id="formAssignment" }))
{
    @Html.AntiForgeryToken()
    <table class="headertable">            
        <tbody>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>Project Name</b>
                </td>
                <td>
                    @Html.DropDownListFor(mod => mod.ProjectName, Model.ProjectNameList, new { @class = "textBoxDisplay", @id = "ddlProjectName", style = "width:300px;" })
                    @Html.ValidationMessageFor(x => x.ProjectName)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>CEQR Number</b>
                </td>
                <td>
                    @Html.DropDownListFor(mod => mod.CEQRNumber, Model.CEQRNumberList, new { @class = "textBoxDisplay", @id = "ddlCEQRNumber" })
                    @Html.ValidationMessageFor(x => x.CEQRNumber)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>Upload File</b>
                </td>
                <td>
                    @Html.TextBoxFor(mod => mod.File, new { @class = "textBoxFileDisplay", style = "width:600px;", type = "file", multiple = "true", @id = "txtFiles" })
                    @Html.ValidationMessageFor(x => x.File)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;"></td>
                <td>
                    <button name="button" class="button" value="UploadFile" id="btnUploadFiles">
                        Upload File
                    </button>                        
                    &nbsp;
                    <button name="button" value="create" class="button" id="btnClearSeach">
                        Clear
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
}

jQuery

$('#btnUploadFiles').click(function (event) {
        fnBlockUI();
        event.preventDefault();
        var data = new FormData();

        // add project Name, CeqrNumber and files to form here

        $.ajax({
            url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })',
            type: 'POST',
            dataType: 'json',
            cache: false,
            headers: headers,
            data: data,                
            success: function (result) {
                $.unblockUI();
                $('body').empty().append(result);
            },
            error: function (xhr, textStatus, errorThrown) {
                $.unblockUI();
                alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator .");
            }
        });
    });

控制器方法

[HttpPost]
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles)
{
    // Upload code here
}

型号

public class ProjectUploadFiles
{
    public string CEQRNumber { get; set; }

    public string ProjectName { get; set; }

    public IEnumerable<HttpPostedFileBase> File { get; set; }
}

问题

我的应用程序允许用户根据 CEQRNumber 和相应的 ProjectName 上传多个文件。 btnUploadFiles 点击事件使 ajax 发布，将选定的 CEQRNumber、ProjectName 和附加文件传递给控制器​​。

我想使用 Formdata() 进行上传。我能够上传没有其他参数的单个文件，但我不确定如何将多个文件和其他参数作为表单数据传递给我的控制器以解析为模型。

[HttpPost]
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles)
{
    // Upload code here
}

Answer 1

为什么不用表单本身来初始化表单数据呢？
表单中是否有您不想发送的字段？ 您要发送的表单之外是否有字段？

    $('#btnUploadFiles').click(function (event) {
        fnBlockUI();
        event.preventDefault();
        var data = new FormData($('#formAssignment')[0]);

        $.ajax({
            url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })',
            type: 'POST',
            dataType: 'json',
            cache: false,
            headers: headers,
            data: data,  
            contentType: false,
            processData: false,              
            success: function (result) {
                $.unblockUI();
                $('body').empty().append(result);
            },
            error: function (xhr, textStatus, errorThrown) {
                $.unblockUI();
                alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator .");
            }
        });
    });