Carga de múltiples imágenes de la misma forma usando MVC3

Question

Aquí está mi código del controlador y también mi Vista:

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

Y en el controlador. No se centre en el contenido del método de acción, simplemente concéntrese en el parámetro del tipo List<HttpPostedFileBase>. ¿Es esta la manera correcta de hacer las cosas? Tal como está, images es nulo a partir del envío del formulario.

[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); 
    } 
} 

Si pudiera proporcionar un ejemplo muy simple que sería fantástico.

Answer 1

bien, así que esto es un ejemplo sencillo de cómo hacerlo. El resultado final:

el marcado HTML es una forma sencilla, con un botón de envío.

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

También se necesita un poco de la magia de jQuery para que cada vez que alguien añade una imagen, dejamos que también se suman en más según sea necesario. Un usuario puede subir N imágenes.

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

Y, finalmente, el código del controlador:

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

Answer 2

mirada a estos dos puestos que podría ayudar a

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

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