Mehrere Dateien hochladen mit ASP.NET MVC & jQuery Mehrere Dateien hochladen Plugin

Question

Ich benutze jQuery Multiple File Upload Plugin, um mehrere Bilder hochzuladen. Aber form posts nur 1, top, item. 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 

... 

Hier ist mein Code:

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

    <% } %> 

und Code des Controllers:

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

Bitte geben Sie mir, wie das Problem zu lösen. Vielleicht können Sie andere Wege empfehlen, um mehrere Bilder hochladen zu lassen. TIA

PS. Neben HTML-Code von der SRTT-Steuerelemente generiert:

<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

Ich denke, das Problem ist der Name der Datei [] im generierten HTML. Dies funktioniert natürlich nicht gut von der Plug-in-Seite.

Manchmal funktioniert das richtige Verhalten. Versuchen Sie, "[]" aus dem Namen zu entfernen und zu sehen.

Eigentlich, da Sie die Eingabefelder nicht namentlich verwenden. Sie können den Namen ähnlich wie bei den Homepage-Beispielen des Plug-ins unverändert lassen.

Probieren Sie es aus.

Answer 2

Sie sollten in der Lage sein, an eine Liste zu binden.

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

und Ihrer Ansicht nach sollte

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

Answer 3

ich gefunden habe. Die Eigenschaft 'namePattern' sollte definiert werden, um Eingaben mit anderem Namen zu generieren.

Für ex .:

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

Trotzdem vielen Dank für Ihre Hilfe.

Answer 4

Das Problem war, dass Sie versuchen, auf ein Array zuzugreifen, das den gleichen Index enthält wie das POST submit ein Array von Dateien mit demselben Namen erhält.

Statt

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

Verwendung

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

Answer 5

fand ich eine Lösung. Die Antwort war, die HttpPostedFileBase zu einem IEnumerable zu ändern (wenn Sie mehrere Dateien hochladen).

Ich hatte das gleiche Problem (s) wie Sie oben. Das hat mein Problem gelöst. Hier ist auch ein guter Link: Phil Haacks's post

Answer 6

Sie können look here eine Lösung von Phil Haack.

Auf der Ansicht

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

On-Controller

[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, Sie mehrere Dateien mit einem einzigen Datei-Upload-Feld hochladen:

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

In diesem Fall Ihre Aktionsmethode kann etwas wie sein:

public ActionResult Index(List<HttpPostedFileBase> files) { 

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

Answer 8

Ansicht

<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

Posting viele Datei mit Jquery Ajax und .net MVC:

In Aussicht:

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