Caricamento di più file con ASP.NET MVC e jQuery Plugin di caricamento di file multipli

Question

Uso il plugin di caricamento di file multipli jQuery per caricare diverse immagini. Ma forma messaggi solo 1, in alto, elemento. Fiddler (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 

... 

Ecco il mio codice:

<% 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" /> 

    <% } %> 

E il codice del controller:

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

prega di avvisare me come risolvere il problema. Forse puoi consigliare un altro modo per consentire all'utente di caricare più immagini. TIA

PS. Oltre al codice html generato dai controlli degli script:

<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

Penso che il problema sia il nome file [] nell'HTML generato. Chiaramente questo non funziona bene dal lato del plug-in.

A volte invertendo il comportamento corretto è ciò che funziona. Prova a rimuovere "[]" dal nome e vedere.

In realtà, poiché non si utilizzano i campi di input per nome. Puoi lasciare il nome unset simile agli esempi di homepage del plug-in.

Provalo.

Answer 2

Dovresti riuscire a collegarti a un elenco.

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

e la visualizzazione dovrebbe avere

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

Answer 3

ho trovato. La proprietà 'namePattern' dovrebbe essere definita per generare input con un nome diverso.

Per es .:

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

Tuttavia, grazie per il vostro aiuto.

Answer 4

Il problema è stato che si sta tentando di accedere a un array che contiene lo stesso indice in cui l'invio POST sta ottenendo un array di file con lo stesso nome.

Invece di

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

ho trovato una soluzione. La risposta era di cambiare HttpPostedFileBase in un oggetto IEnumerable (se stai caricando più file).

Ho avuto lo stesso problema (s) di cui sopra. Questo ha risolto il mio problema. Ecco un buon collegamento anche: Phil Haacks's post

Answer 6

È possibile look here una soluzione da Phil Haack.

Nella visualizzazione

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

acceso Controllo

[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

in HTML5, è possibile caricare più file con un singolo campo di caricamento file:

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

In tal caso, il metodo di azione può essere qualcosa di simile:

public ActionResult Index(List<HttpPostedFileBase> files) { 

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

Answer 8

vista

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

controller

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

Distacco molti file con jquery ajax e .net MVC:

In Vista:

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

In 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, 
    }); 
}); 

Controller:

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

     return Content("Succesfully"); 
    }