Carga de archivos múltiples con ASP.NET MVC y jQuery Complemento de carga de archivos múltiples

Question

Estoy usando el complemento de carga de varios archivos jQuery para cargar varias imágenes. Pero el formulario solo publica 1, arriba, artículo. El violinista (POST):

POST /Images/UploadImages HTTP/1.1 
Host: localhost:4793 
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Keep-Alive: 300 
Connection: keep-alive 
Referer: http://localhost:4793/images 
Cookie: .ASPXAUTH=EFAC4E03FA49056788028048AE1B099D3EB6D1D61AFB8E830C117297471D5689EC52EF40C7FE2CEF98FF6B7C8CAD3AB741A5E78F447AB361A2BDD501331A88C7B75120611CEA4FECA40D972BB9401472 
Content-Type: multipart/form-data; boundary=---------------------------1509898581730 
Content-Length: 290022 

-----------------------------1509898581730 
Content-Disposition: form-data; name="album" 

1 
-----------------------------1509898581730 
Content-Disposition: form-data; name="file[]"; filename="Blue hills.jpg" 
Content-Type: image/jpeg 

... 

Aquí está mi código:

<% using (Html.BeginForm("UploadImages", "Images", FormMethod.Post, new { enctype = "multipart/form-data"})) 
     {%> 

    <%= Html.DropDownList("album", (IEnumerable<SelectListItem>)ViewData["Albums"])%> 
     <br />  
    <input type="file" name="file[]" id="file" class="multi" accept="jpg|png" /> 
     <br /> 
    <input type="submit" name="submit" value="Submit" /> 

    <% } %> 

Y el código del controlador:

public ActionResult UploadImages(FormCollection formValue) 
    {   
     foreach (string file in Request.Files) 
     { 
      HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; 
      if (hpf.ContentLength == 0) 
       continue; 

      //do something with file 
     } 
     return RedirectToAction("Index"); 
    } 

aconsejarme cómo resolver el problema. Tal vez pueda recomendar otra forma de permitir que el usuario cargue varias imágenes. TIA

PS. Además del código html generado por los controles sript:

<input id="file" class="multi" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F1" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F2" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F3" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F4" class="multi MultiFile" type="file" accept="jpg|png" name="file[]"/> 

Answer 1

Creo que el problema es el archivo de nombre [] en el HTML generado. Claramente, esto no funciona bien desde el lado del plug-in.

A veces, invertir el comportamiento correcto es lo que funciona. Intenta eliminar "[]" del nombre y mira.

En realidad, ya que no está utilizando los campos de entrada por su nombre. Puede dejar el nombre sin configurar similar a los ejemplos de la página de inicio del complemento.

Pruébalo.

Answer 2

Debe poder enlazar a una lista.

public ActionResult UploadImages(List<HttpPostedFileBase> file) 
{ 
// magic 
} 

y su punto de vista debe tener

<input id="file" class="multi" type="file" accept="jpg|png" name="file" style="position: absolute; top: -3000px;"/> 

Answer 3

que he encontrado. La propiedad 'namePattern' se debe definir para generar entradas con diferentes nombres.

Por ej .:

<input type="file" accept="gif|jpg|jpeg|png" /> 


<script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 
      $i = (1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20); 
      $(':file').MultiFile({ namePattern: '$name_$i', maxlength: 20 }); 
     }); 
</script> 

No obstante, gracias por su ayuda.

Answer 4

El problema fue que está tratando de acceder a una matriz que contiene el mismo índice que la POST submit que está obteniendo una matriz de archivos con el mismo nombre.

En lugar de

foreach (string file in Request.Files) 
{ 
     HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; 

uso

for (int i = 0; i < Request.Files.Count; i++) 
{ 
     HttpPostedFileBase hpf = Request.Files[i]; 

Answer 5

he encontrado una solución. La respuesta fue cambiar el HttpPostedFileBase a un IEnumerable (si está cargando varios archivos).

Tuve el (los) mismo (s) problema (s) que usted arriba. Esto resolvió mi problema. Aquí hay un buen enlace también: Phil Haacks's post

Answer 6

Puede look here una solución de Phil Haack.

En la vista

<form action="" method="post" enctype="multipart/form-data"> 

    <label for="file1">Filename:</label> 
    <input type="file" name="files" id="file1" /> 

    <label for="file2">Filename:</label> 
    <input type="file" name="files" id="file2" /> 

    <input type="submit" /> 
</form> 

El controlador

[HttpPost] 
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) { 
    foreach (var file in files) { 
    if (file.ContentLength > 0) { 
     var fileName = Path.GetFileName(file.FileName); 
     var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName); 
     file.SaveAs(path); 
    } 
    } 
    return RedirectToAction("Index"); 
} 

Answer 7

En HTML5, puede cargar varios archivos con un solo campo para subir archivos:

<input type="file" id="files" name="files" multiple /> 

En ese caso, su El método de acción puede ser algo así como:

public ActionResult Index(List<HttpPostedFileBase> files) { 

foreach (var file in files) { 
    ...etc. 

Answer 8

vista

<input type="file" id="updFiles" multiple name="updFiles" /> 

controlador

if (Request.Files != null && Request.Files.Count > 0) 
{  
    for (int i = 0; i < Request.Files.Count; i++) 
    { 
     HttpPostedFileBase file = Request.Files[i]; 
     if (file != null && file.ContentLength > 0) 
     { 
      var fileName = Path.GetFileName(file.FileName); 
      //store 
      var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName); 
      file.SaveAs(path); 
     } 
    } 
} 

Answer 9

Publicación de muchos archivos con jQuery Ajax y .net MVC:

En Vista:

 <input type="file" name="files" multiple class="hidden" id="inputFiles"> 
     <button id="upload" class="btn btn-sm btn-primary" type="button">Încarcă</button> 

En JS:

var btnUpload = $("#upload"); 
var inputFiles = $('#inputFiles'); 

    btnUpload.click(function() { 
    inputFiles.trigger('click'); 
}); 

inputFiles.on('change', function() { 
    var formData = new FormData(); 

    for (var i = 0; i < inputFiles[0].files.length; i++) 
     formData.append("files[" + i + "]", inputFiles[0].files[i]) 

    $.ajax({ 
     url: window.baseUrl + "Archivator/Upload", 
     type: "POST", 
     contentType: "application/json, charset=utf-8", 
     dataType: "json", 
     data: formData, 
     processData: false, 
     contentType: false, 
    }); 
}); 

controlador:

[HttpPost] 
    public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) 
    { 

     return Content("Succesfully"); 
    }