Загрузка нескольких изображений в одной и той же форме, используя MVC3

Question

Вот мой код контроллера, а также мой Вид:

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

    <div class="form-field"> 
     <p>@Html.LabelFor(m => m.Name)</p> 
     @Html.EditorFor(m => m.Name) 
    </div> 

    <div class="form-field"> 
     <p>@Html.LabelFor(m => m.Description)</p> 
     @Html.EditorFor(m => m.Description) 
    </div> 

    <div class="form-field"> 
     <p>@Html.LabelFor(m => m.UnitPrice)</p> 
     @Html.EditorFor(m => m.UnitPrice) 
    </div> 

    <div class="form-field"> 
     <input type="file" name="image1" /> 
     <input type="file" name="image2" /> 
     <input type="file" name="image3" /> 
    </div> 

    <div class="form-field"> 
     <input type="submit" value="Create" /> 
    </div> 
} 

И в контроллере. Не фокусируйтесь на содержании метода действия, просто сосредоточьтесь на параметре типа List<HttpPostedFileBase>. Правильно ли это? Как это, images является низом при подаче формы.

[HttpPost] 
public ActionResult Create(ProductModel model, List<HttpPostedFileBase> images) 
{ 
    try 
    { 
     if (ModelState.IsValid) 
     { 
      var newProduct = Mapper.Map<ProductModel, Product>(model); 
      _productRepository.CreateProduct(newProduct); 
      _productRepository.SaveChanges(); 
     } 
     return RedirectToAction("Index"); 
    } 
    catch 
    { 
     return View(model); 
    } 
} 

Если вы могли бы предоставить очень простой пример, который был бы фантастическим.

Answer 1

ОК, так что это простой пример того, как это сделать. Конечный результат:

HTML разметка представляет собой простую форму, с кнопки отправки.

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

    <div class="form-field"> 
     <p>Select pictures:</p> 
     <div class="upload-container"> 
      <div class="upload"> 
       <input type="file" name="files" id="file1" /> 
       <img src="@Url.Content("~/Public/images/delete.png")" alt="Remove picture." /> 
      </div> 
     </div>   
    </div> 

    <div class="form-field"> 
     <input type="submit" value="Create" /> 
    </div> 
} 

Мы также необходим JQuery магии, так что каждый раз, когда кто-то добавляет изображение, мы позволим им также добавить больше, как это необходимо. Пользователь может загрузить N изображений.

<script type="text/javascript"> 
    $(document).ready(function() { 
     var currentImage = 1; 
     $("body").on("change", "input[name='files']", function() { 
      var pathToRemoveIcon = "@Url.Content("~/Public/images/delete.png")"; 
      currentImage = currentImage + 1; 
      var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>'; 
      $('.upload-container').append(htmlToAppend); 
     }).on("click", ".upload img", function() { 
      if ($(this).parent().siblings().length > 0) { 
       $(this).parent().remove();  
      } 
     }); 
    }); 
</script> 

И, наконец, код контроллера:

[HttpPost] 
public ActionResult Create(IEnumerable<HttpPostedFileBase> files) 
{ 
    try 
    { 
     if (ModelState.IsValid) 
     { 
      //Persist the files uploaded. 
     } 
     return RedirectToAction("Index"); 
    } 
    catch 
    { 
     return View(model); 
    } 
} 

Answer 2

Посмотрите на эти две должности они могли бы помочь

ASP.NET MVC: ModelBinding Multiple File Uploads to an Array

Uploading a File (Or Files) With ASP.NET MVC