2012-12-30 73 views
4

我需要根據用戶需求添加多個文件上傳的功能,但用戶必須能夠爲上傳分配名稱以供以後使用。 正如你所看到的,我只是動態地添加更多的文件上傳,但爲這些上傳分配一個名稱似乎是我的問題。 有什麼辦法可以做到這一點?使用不同的名稱字段動態添加FileUpload

Screenshot how it is at the moment

在我看來,代碼:

@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> 
     } 
} 

在我的控制器代碼如下:

[Authorize] 
public ActionResult Create() 
{ 
    ViewBag.ArticleTypes = new SelectList(ArticleTypes, "Type"); 
    return View(); 
} 


[HttpPost] 
[Authorize] 
public ActionResult Create(ArticleCreateModel article) 
{ 
    var files = Request.Files; 

    if (ModelState.IsValid) 
    { 
     ... 
    } 
    return View(article); 
} 

回答

3

你可能需要自己創建額外的上傳。這可以使用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> 

上的負載,我們將在克隆供以後使用一個變量的「模板」。點擊後,我們將克隆模板並將其添加到文檔中。

$(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 
} 

然後解析Request.Files和你知道:-)的Foo.FileName場WIL lcontain用戶爲每上傳給出文件名的魔力文件。您可以使用它作爲Request.Files中的第一個文件映射到Foo.FileName [0]等。

相關問題