Dropzone mehrere Bereiche in der gleichen Form

Question

Ich mache komplexe Form Und ich möchte mehrere (verschiedene) dropzone.js verwenden, um Dateien hochzuladen.

Hier ist, wie ich gemacht:

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
... form elements... 
<div id="files" name="files" class="dropzone"></div> 
} 

und die JS:

Dropzone.options.files = { 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    maxFiles: 100, 

    paramName: "file", // The name that will be used to transfer the file 
    maxFilesize: 8, // MB 
    url: "/pathToAction" 
}; 

Ich möchte zugleich Dateien und Daten des Formulars senden, die alle zu einem Objekt der abgebildete Controller aber Dropzone muss die "URL" haben, um Datei-Upload zu akzeptieren ... Wie behebt man das? Vielleicht kann ich die URL des Formularelements abrufen und in den URL-Parameter eingeben?

Answer 1

Sie einen den Pfad zur Aktion mit dem @ Url.Action Helfer

... 
    paramName: "file", // The name that will be used to transfer the file 
    maxFilesize: 8, // MB 
    url: "@Url.Action("actionname")" 
}; 

Answer 2

Wie ich auf der Google gesucht zu schaffen, gibt es keine Möglichkeit eine Anfrage für mehr „Dropzone“ mit der gleichen URL zu schicken, Also löste ich dieses Problem manuell durch die folgenden Schritte:

1) Dropzone tatsächlich die Bilder zu Base64 Zeichenfolge für Miniaturansicht ändern und dann fügen Sie diese Zeichenfolge an die Quelle von "img" -Tag. So müssen Sie das Bild „src“ und „alt“ lesen, und auch sie an den Eingangstyp dynamisch wie folgt versteckt hinzu:

$('#btnUpload').on('click', function() { 
     $.each($("img[data-dz-thumbnail]"), function(index, value) { 
      $('<input>').attr({ 
       type: 'hidden', 
       name: 'myHiddenFiles[' + index + '].Key', 
       value: $(value).attr("alt") 
      }).appendTo('#newsForm'); 

      $('<input>').attr({ 
       type: 'hidden', 
       name: 'myHiddenFiles[' + index + '].Value', 
       value: $(value).attr("src") 
      }).appendTo('#upload-Invoices'); 
     }); 
     $("#upload-Invoices").submit(); 
    }); 

Wiederholen Sie diese Codes für jeden Sprungplatz müssen Sie ihre Daten veröffentlichen.

2) Bei Ihrer Aktionsmethode müssen Sie einen Parameter vom Typ "Dictionary" hinzufügen, um den Dateinamen und den Dateiinhalt mit dem Base64-String-Format zu erhalten. Dann können Sie die Base64-Zeichenfolge als Bild analysieren, als Datei speichern und Ihre Formulardaten in der Datenbank speichern. Sie können den im Zusammenhang Snippet-Code wie folgt sehen:

 [HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create(ModelClass model, IDictionary<string, string> myHiddenFiles) 
     { 
      if (ModelState.IsValid) 
      { 
       foreach (var file in myHiddenFiles) 
       { 
        var base64 = file.Value.Substring(file.Value.IndexOf(',') + 1).Trim('\0'); 
        var bytes = Convert.FromBase64String(base64); 

        var saveFile = Server.MapPath("~/Images/" + file.Key); 
        System.IO.File.WriteAllBytes(saveFile, bytes); 

        // Save your model to database.... 
       } 
      } 
      return View(); 
     }