dropzone несколько областей в той же форме

Question

Я делаю сложную форму И я хочу использовать несколько (drop) для dropbox.js для загрузки файлов.

Вот как я сделал:

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

И в 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" 
}; 

Я хочу, чтобы отправить файлы и данные формы в то же время, все сопоставлен объект в контроллер, но dropzone должен иметь «url», чтобы принять загрузку файла ... Как это исправить? Может быть, я могу получить url элемента формы и поместить его в параметр url?

Answer 1

Вам создать путь к действию с помощником @ Url.Action

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

Answer 2

Как я искал на Google, нет никакого способа, чтобы отправить один запрос на несколько «Dropzone» с тем же URL, поэтому я решил эту проблему вручную с помощью следующих шагов:

1) Dropzone фактически меняет изображения на строку Base64 для предварительного просмотра миниатюр, а затем добавляет эту строку в источник тега «img». Таким образом, вы должны прочитать, что изображение «SRC» и «Alt», а также добавить их к типу входного скрытом динамически, как:

$('#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(); 
    }); 

Повторите эти коды для каждого DropZone вы должны размещать свои данные.

2) В вашем методе действий вам нужно добавить параметр с типом «Словарь», чтобы получить имя файла и содержимое файла в формате строки Base64. Затем вы можете проанализировать строку Base64 как изображение, сохранить его как файл и сохранить данные формы в базе данных. Вы можете увидеть, связанный фрагмент кода следующим образом:

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