Javascript Dropzone JS的自定义预览模板

我用dropzone创建了一个表单，但是在将文件传递到服务器时遇到了问题。我创建了一个自定义预览模板，类似于bootstrap演示中的模板，但当我在表单上单击submit时，文件不会传递到服务器。任何帮助都将不胜感激。下面是代码

 <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>

---

我在wiki上试过演示，在stackoverflow上试过其他一些，但都没能成功。现在，当我拖放图像时，我确实会在模板中看到缩略图，但当我单击“提交”时，图像不会传递到服务器供我处理。如有任何帮助，我们将不胜感激。

只需遵循本教程：

---

这里的问题是，在按下提交按钮之前，文件是异步上载的。

只需遵循本教程：

---

这里的问题是，在按下“提交”按钮之前，文件是异步上载的。

您应该提供有关该按钮不起作用的更多信息。将网络请求上传到服务器。您可以打开调试器工具，转到“网络”选项卡，并在拖放过程中观察它。您应该提供有关该工具不起作用的更多信息。将网络请求上传到服务器。您可以打开调试器工具，转到“网络”选项卡，并在拖放时观看它。

//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
    });
  }

}