將dropzone與簡單表單結合

Question

我想將帶有DropzoneJS的文件上傳器插入到我的HTML表單中。我根據tutorial編寫了以下代碼。

這裏是我的形式：

<form id="createProject" class="dropzone" action="/new_project" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="new_project" value="1"> 
    <div class="panel-body"> 
     <div class="row egal"> 
      <div action="#" class="col-md-4 col-xs-12 picture dropzone-previews"> 
       <div class="egal-center"> 
        <h5> 
         Add Picture 
        </h5> 
        <div class="upload-box btn"> 
         <i class="glyphicon glyphicon-plus"></i> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-8 col-xs-12"> 
       <input type="text" name="title" class="form-control" placeholder="Add a new title"/> 
       <input type="text" name="web_page" class="form-control" placeholder="Type in your project's website"/> 
       <textarea name="description" cols="40" rows="5" class="form-control" placeholder="Say something about your project "></textarea> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="input-group"> 
       <input name="video[]" class="form-control" type="text" placeholder="Video"/> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-login addNewField"> 
         <i class="fa fa-plus"></i> 
        </button> 
       </div> 
      </div> 
      <div class="input-group"> 
       <input name="prezi[]" class="form-control" type="text" placeholder="Prezi"/> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-login addNewField"> 
         <i class="fa fa-plus"></i> 
        </button> 
       </div> 
      </div> 
     </div> 
     <button type="submit" class="btn btn-login btn-block"> 
      Create project 
     </button> 
    </div> 
</form> 

正如你看到的，我有一些輸入字段和一個盒子，我讓與JavaScript中的懸浮窗。我在教程中設置了這樣的東西，但下面的JavaScript不起作用。它成功地添加了事件偵聽器，只是processQueue()方法不起作用。我將最大文件上傳設置爲1，因爲只允許有一個圖像。

Dropzone.options.createProject={ 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 1, 
    maxFiles: 1, 
    clickable: ".dropzone-previews", 
    previewsContainer: ".dropzone-previews", 
    paramName:"picture", 
    init: function() { 
     var myDropzone=this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
      $(this).closest('form').ajaxFormSend(function(data){ 
       $('.projects-panel').prepend(Mustache.to_html(window.templates.panelProjects, data.data)); 
      }); 
     }); 
     this.on("sendingmultiple", function(){ 
     }); 
     this.on("successmultiple", function(files, response){ 
     }); 
     this.on("errormultiple", function(files, response){ 
     }); 
     this.on("maxfilesexceeded", function(file){ 
      myDropzone.removeFile(file); 
      noty({ 
       type:'error', 
       text:'No more files plesase!' 
      }); 
     }); 
    } 
} 

最好的解決辦法是，如果懸浮窗只在形式的具體名稱設置一個隱藏的文件輸入的值，並與其他數據正常發送的文件發送表單時。

注意：ajaxFormSend是一個jQuery方法，我編寫了一個連接發送文件和其他數據。我只是把它留在代碼中，因爲我想用這個方法發送帶有AJAX的整個表單，所以我只需要添加一個隱藏的輸入字段，Dropzone設置這個輸入字段的值。

Answer 1

你應該可以用dropzone發送沒有問題的表單，但我不認爲你可以將文件從dropzone傳遞到常規輸入字段，我相信它出於安全原因。

要使用懸浮窗使用這樣的配置將表格：

Dropzone.options.createProject = { 
    autoProcessQueue: false, 
    parallelUploads: 1, 
    maxFiles: 1, 
    previewsContainer: ".dropzone-previews", 
    dictDefaultMessage: '', 
    clickable: '.upload-box', 
    paramName:"picture", 
    init: function() { 
     var myDropzone=this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 

     }); 
     this.on('addedfile', function(file){ 
      $('.upload-box').hide(); 
     }); 
     this.on('success', function(file){ 
      console.log(file.xhr.response); 
     }); 
    } 
} 

如果你只想讓一個圖像不需要uploadMultiple選項，當上傳成功後，您可以將您要在success事件中執行的代碼。在這個例子中，只是在控制檯中輸出來自服務器的響應。

另請注意，選項dictDefaultMessage可從dropzone中刪除默認消息，而clickable選項可使用dropzone容器中的其他元素。