Formdata多个文件上传

时间:2015-10-16 18:06:28

标签: jquery ajax asp.net-mvc file-upload

我的表格

@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 click事件发出ajax帖子,将选定的CEQRNumber,ProjectName和附加的文件传递给控制器​​。

我想使用Formdata()进行上传。我能够上传一个没有其他参数的文件,但我不知道如何将多个文件和其他参数作为formdata传递给我的控制器,以便作为模型解析。

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

1 个答案:

答案 0 :(得分: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 .");
            }
        });
    });