當與其他表單數據結合使用時，不會使用dropzone.js發佈文件

我正在做類似於此文章dropzoneForm data with file的內容。我正在使用MVC 5/Razor語法。我能夠在調試時成功地看到我的模型數據，但是我的Request.Files始終爲0.當與其他表單數據結合使用時，不會使用dropzone.js發佈文件

在我的create.cshtml中，我有類似於此的代碼。我的模特很大，所以我不包括一切。

@using (Html.BeginForm()) 

@Html.AntiForgeryToken() 
<div class="container"> 
<div class="dropzone" id="myDropzone"> HERE </div> 
<div class="row botborder paddbot" id="addbuilder" style="display:none"> 
    <div class="form-group"> 
     <div class="col-md-4 "> 
      <span class="control-label ">Builder Name</span> 
      <span class="glyphicon glyphicon-asterisk text-danger" aria-hidden="true"></span> 
      @Html.EditorFor(model => model.BuilderModel.Builder, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.BuilderModel.Builder, "", new { @class = "text-danger" }) 
     </div> 
     <div class="col-md-4 "> 
      <span class="control-label">Builder's WebSite</span> 
      @Html.EditorFor(model => model.BuilderModel.BuilderWebSite, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.BuilderModel.BuilderWebSite, "", new { @class = "text-danger" }) 
     </div> 
     <div class="col-md-4 "> 
      <span class="control-label">Builder's Phone</span> 
      @Html.EditorFor(model => model.BuilderModel.BuilderPhone, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.BuilderModel.BuilderPhone, "", new { @class = "text-danger" }) 
     </div> 
    </div> 
</div>

@結束行@

你可以看到這個想法。我剛纔添加一個DIV表格內爲用戶太刪除文件。

內create.cshtml我也有下面的JS代碼

Dropzone.options.myDropzone = { 
    url: 'ReviewModels/Create', 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 5, 
    maxFiles: 5, 
    maxFilesize: 1, 
    acceptedFiles: 'image/*', 
    addRemoveLinks: true, 
    init: function() { 
     dzClosure = this; 
     // for Dropzone to process the queue (instead of default form behavior): 
     document.getElementById("submit-all").addEventListener("click", function (e) { 
      alert('sub1'); 
      dzClosure.processQueue(); 
     }); 

     //send all the form data along with the files: 
     this.on("sendingmultiple", function (data, xhr, formData) { 
      alert(formData) 
     }); 
    } 
}

與控制器我有以下的代碼和request.files沒有顯示任何文件，但該模型數據來成功跨越。我不確定我錯過了什麼。任何幫助將不勝感激，如果我可以提供更多的信息，我會這樣做。謝謝

[HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(HolderModel review) 
    { 
     if (review.BuilderModel.Builder ==null) 
      // if select existing builder 
     { 
      foreach (string fileName in Request.Files) 
      { 
       HttpPostedFileBase file = Request.Files[fileName]; 
       //Save file content goes here 
       var fName = file.FileName; 
      }

來源

2016-09-15 Maryanne

你需要做兩件事情：

設置的形式 ID myDropZone所以它會被初始化懸浮窗時匹配。 不創建名爲myDropZone
形式裏面一個單獨的DIV讓它的multipart/form-data的

你@using應該是這樣的：

@using (Html.BeginForm("ActionMethodName", "ControllerName", FormMethod.Post, new 
{ 
    enctype = "multipart/form-data", 
    id = "myDropZone" 
}))

你不必要做任何xhr工作，你自己通過發送表單數據，Dropzone在相同的請求中發送文件和表單值。

添加一個按鈕來提交的所有數據（表單標籤內的某處）：

<button id="btnStartUpload">Upload All</button>

，然後在懸浮窗Init這需要存在：

init: function() { 
    var myDropzone = this; 
    var submitButton = document.getElementById("btnStartUpload"); 

    submitButton.addEventListener("click", function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     $("#StartOrCancel").hide(); 

     myDropzone.processQueue(); 
     myDropzone.options.autoProcessQueue = true; 
    }); 
...

注意

e.preventDefault(); 
    e.stopPropagation();

是非常重要的，否則你會得到一個雙重表單提交，一個通過Dropzone的xhr和sec通過一個完整的POST

來源

2016-09-18 20:56:16

當與其他表單數據結合使用時，不會使用dropzone.js發佈文件

回答

相關問題