Question

我需要将drop / clickable和预览区域从<form>移动到一个单独的div容器，这样我就可以使用普通的表单。

问题是我设置了这两个选项但没有任何反应，它仍然显示整个表单作为区域（在jsfiddle中至少是可点击的但在我的页面中不是）。

这是我正在使用的html代码（是的，dropzone是一个带样式的css类）：

<form id="myAwesomeDropzone" class="dropzone" action="index.php">
    <div class="option img">
        <p>Imagenes (máximo 6):</p>
        <div id="dropzone">
            <div class="dropzone-previews"></div>
        </div>
    </div>
    // more form
</form>

这是dropzone代码：

Dropzone.options.myAwesomeDropzone = {
    paramName: "file",
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    parallelUploads: 6,
    maxFilesize: 6,
    maxFiles: 6,
    autoDiscover: false,
    autoProcessQueue: false,
    uploadMultiple: true,
    previewsContainer: '.dropzone-previews',
    clickable: '.dropzone-previews',

    // 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.
    alert(response);
    });
    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
    alert(response);
    });
    }
};

http://jsfiddle.net/enr8jg3o/1/

Answer 1

你写的HTML，做它应该做的事情。而且它只将文件图标（预览）和可点击区域的位置移动到新的div，但我不认为Dropzone.js中有一个选项可以移动可伸缩区域。为什么，你可以使用没有那个div的普通形式。

previewsContainer和clickable选项在dropzone中不起作用

1 个答案: