File upload 使用不同的名称字段动态添加FileUpload

File upload 使用不同的名称字段动态添加FileUpload,file-upload,razor,asp.net-mvc-4,File Upload,Razor,Asp.net Mvc 4,我需要能够根据用户需要添加多个文件上载,但用户必须能够为上载指定名称,以供以后使用。 正如您所看到的,我只是动态地添加更多的文件上传,但为这些上传分配一个名称似乎是我的问题。 我有什么办法可以做到这一点吗 在我看来,代码是: @using Microsoft.Web.Helpers @model MusicNews.Web.Models.ViewModel.ArticleCreateModel @{ ViewBag.Title = "Create"; } @section cont

我需要能够根据用户需要添加多个文件上载,但用户必须能够为上载指定名称,以供以后使用。 正如您所看到的,我只是动态地添加更多的文件上传,但为这些上传分配一个名称似乎是我的问题。 我有什么办法可以做到这一点吗

在我看来,代码是:

@using Microsoft.Web.Helpers
@model MusicNews.Web.Models.ViewModel.ArticleCreateModel

@{
    ViewBag.Title = "Create";
}

@section content
{

        @using (Html.BeginForm("Create", "Article", FormMethod.Post,
                      new { enctype = "multipart/form-data" }))
        {
                ...

                @FileUpload.GetHtml("Files",2,true,false,"Add more")

                <p>
                    <input type="submit" value="Create" />
                </p>
        }
}

您可能需要自己创建额外的上传。这可以使用jQuery完成,例如:

以下是HTML:

<div id="uploads">
    <div id="uploadtemplate">
        <input type="file" name="upload" />
        <input type="text" name="FileName" />
    <div>

    <a href="#" id="addFile">Add file</a>
</div>
您的模型将是:

public class Foo {
    public string[] FileName { get; set; } // will contain all file names given by the user
}
然后解析Request.Files并执行您知道的神奇操作:-)Foo.FileName字段将包含用户为每个上载文件指定的文件名。您可以将其用作请求中的第一个文件。文件将映射到Foo.FileName[0],依此类推

$(function() {/
    $('#addFile').data('uploadtemplate', $('#uploadtemplate').attr('id', '').clone());

    $('#addFile').click(function(e) {
        $(this).data('uploadtemplate').clone().insertBefore( $this) );

        e.preventDefault();
    });
});
public class Foo {
    public string[] FileName { get; set; } // will contain all file names given by the user
}