Dropzone 预览未显示在预览区域中

Question

我正在使用 Matias Meno 的教程将 dropzone 程序化地实现到表单中：https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone。

预览无法正确显示在 preview-zone div 中，我不知道为什么。

HTML：

      <form id="my-awesome-dropzone" action="/uploads" class="dropzone">
            <fieldset name="contact-form-fieldset">
                <legend><h1>Request Services</h1></legend>
                <ul>
                    <li class="contact-form-fieldset-title">Full Name</li>
                    <li><input type="text" name="name" id="contact-form-name" class="plain buffer"></li>
                    <li class="contact-form-fieldset-title">
                    <li class="contact-form-fieldset-title">Email</li>
                    <li><input type="email" name="email" id="contact-form-email" class="plain buffer"></li>
                    <li class="contact-form-fieldset-title">Phone</li>
                    <li><input type="text" name="phone" id="contact-form-phone" class="plain buffer"></li>
                    <li class="contact-form-fieldset-title">Describe the problem with your device</li>
                    <li>
                        <textarea class="plain buffer" id="styled" name="styled-textarea"></textarea>
                    </li>
                    <li>
                          <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
                    </li>
                </ul>
                <div id="contact-form-fieldset-button">
                <button type="submit">Submit data and files!</button>
                </div>
            </fieldset>
            <p>In a hurry? Call 632-345-674</p>
        </form>

     <script src="../js/dropzone.js"></script>
     <script src="../js/uploader.js"></script>

uploader.js 文件包含 Matias 的原始代码：

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,

  // The setting up of the dropzone
init: function() {
  var myDropzone = this;

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[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

试试 previewsContainer: ".dropzone-previews"