将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容器中的其他元素。