Dropzone JS的自定义预览模板

Question

我使用dropzone创建了一个表单，但我遇到了将文件传递到服务器的问题。我创建了一个自定义预览模板，类似于引导演示中的模板，但是当我单击表单上的提交时，这些文件未被传递到服务器。任何帮助，将不胜感激。以下是代码。

<form action="<?php the_permalink(); ?>" method="post" class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data"> 
<div class="dropzoner dropzone-previews" id="dropzoner2"> 
      <div class="dz-preview dz-file-preview" id="template"> <!-- template for images --> 
      <div class="dz-details dztemplate"> 
       <div class="dz-filename" style="display:none;"><span data-dz-name></span></div> 
       <div class="dz-size" style="display:none;" data-dz-size></div> 
       <img data-dz-thumbnail /><br/><input type="text" class="dzinput" placeholder="Type Caption" style="font-style:italic;" /> 
      </div> 
      <div class="dz-progress" style="display:none;"><span class="dz-upload" data-dz-uploadprogress></span></div> 
      <div class="dz-success-mark" style="display:none;"><span>✔</span></div> 
      <div class="dz-error-mark" style="display:none;"><span>✘</span></div> 
      <div class="dz-error-message" style="display:none;"><span data-dz-errormessage></span></div> 
      </div> 
     </div> <!-- Drop Zone Area --> 
     <div class="flrt"><a href="#" class="dz-message" style="font-weight:bold; font-size:18px;">Or use the basic uploader</a></div><br/> 
     <label for="exampletitle">Title<span class="required">*</span></label><br/> 
     <input type="text" name="exampletitle" id="exampletitle" class="fullwidth" required>  <br/><br/> 
<input type="submit" class="btn btn-primary mypanoramabtn" style="background-color:#3ebede" value="Publish" id="submitter"/> 
</form> 

我的javascript：

//getting thumbnail template 
    var previewNode = document.querySelector("#template"); 
    previewNode.id = ""; 
    var previewTemplate = previewNode.parentNode.innerHTML; 
    previewNode.parentNode.removeChild(previewNode); 

//script to handle dropzone 
    jQuery("#my-awesome-dropzone").dropzone = { // The camelized version of the ID of the form element 

    // The configuration we've talked about above 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    thumbnailWidth: 180, 
    thumbnailHeight: 120, 
    parallelUploads: 100, 
    maxFiles: 100, 
    previewTemplate: previewTemplate, 
    previewsContainer: "#dropzoner2", 

    // The setting up of the dropzone 
    init: function() { 
    this.on("addedfile", function(file) { document.getElementById("dropzoner2").style.background = "none";}); //will remove background after file added 
    var myDropzone = this; 

    // First change the button to actually tell Dropzone to process the queue. 
    this.element.querySelector("input[type=submit]").addEventListener("click", function(e) { 
     // Make sure that the form isn't actually being sent. 
     e.preventDefault(); 
     e.stopPropagation(); 
     myDropzone.processQueue(); 
    }); 

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead 
    // of the sending event because uploadMultiple is set to true. 
    this.on("sendingmultiple", function() { 
     // Gets triggered when the form is actually being sent. 
     // Hide the success button or the complete form. 

    }); 
    this.on("successmultiple", function(files, response) { 
     // Gets triggered when the files have successfully been sent. 
     // Redirect user or notify of success. 
    }); 
    this.on("errormultiple", function(files, response) { 
     // Gets triggered when there was an error sending the files. 
     // Maybe show form again, and notify user of error 
    }); 
    } 

} 

我试过在维基和计算器其他一些演示，但一直未能得到这个工作。现在，当我拖放我的图像时，我确实看到了模板中的缩略图，但是当我单击“提交”时，图像不会传递到服务器供我处理。任何帮助，将不胜感激。

Answer 1

只需按照本教程：http://www.codexworld.com/drag-and-drop-file-upload-using-dropzone-php/

这里的问题是，你按下提交键，然后再将其上传异步。