在MVC編輯器模板中使用Dropzone.js

我在使用MVC 5編輯器模板中的dropzone.js時遇到了一些問題。我有一個完整的窗體，這是非常大的部分視圖，在這個部分視圖中，我稱之爲編輯器模板，在這裏我使用dropzone.js。在表單提交（使用自定義按鈕和jquery.form.js實現）上，模型被重新發布，模型的一個屬性是文件。在MVC編輯器模板中使用Dropzone.js

編輯模板代碼：

<div class="col-md-7 col-lg-7 col-sm-6 col-xs-12"> 
       <div class="dropzone" id="filesDropZone"> 
        @Html.TextBoxFor(model => model.attachmentFiles, new { type = "file", multiple = "true" }) 
        @Html.ValidationMessageFor(model => model.attachmentFiles) 
       </div> 
      </div>

JS代碼：

Dropzone.options.filesDropZone = 
     { 
      url: '@ViewBag.ActionUrl', 
      autoDiscover: false, 
      autoProcessQueue: false, 
      paramName: "attachmentFiles", 
      uploadMultiple: true 
     };

現在我面臨的兩個問題是：

此代碼不能在Chrome中工作（我無法在dropzone中刪除文件），而它在IE10中工作。我曾嘗試使用document.ready或使用new Dropzone，但結果相同。
單擊保存按鈕時，會調用一個包含完整模型的操作，但當我使用dropzone時，必須在點擊按鈕時編寫processQueue，並且該操作被調用兩次。一個帶有附件，沒有其他數據，一個帶有數據而沒有附件。我想要的是，它只被調用一次，包含附件在內的所有表單數據。

任何幫助表示讚賞。如果這是唯一的方法，我甚至可以開放使用任何其他更好的庫或編寫自定義代碼。

謝謝。

來源

2016-01-21 Garima

您必須阻止提交表單，加載文件然後提交。爲什麼表單提交兩次的原因是因爲功能：懸浮窗的processQueue()也提交表單...所以你必須使用processQueue()或form.submit提交，要麼（如果有沒有附件）

$("button[type=submit]").on("click", function (e) { 
    // Make sure that the form isn't actually being sent. 

    var form = $(this).closest('form'); 
    if (form.valid() == true) { 
     if (myDropzone.getQueuedFiles().length > 0) { 

      for (instance in CKEDITOR.instances) { 
       CKEDITOR.instances[instance].updateElement(); 
      } 

      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
     } else { 
      form.submit(); 
      //myDropzone.uploadFiles([]); //send empty 
     } 
    } 
});

來源

2016-07-18 16:19:28 parismiguel

在MVC編輯器模板中使用Dropzone.js

回答

相關問題