Javascript Dropzone.js:Can'；t单击自定义预览

Dropzone.js看起来非常挑剔（有人记得SCSI Voodoo吗？），或者文档很糟糕：不管是什么原因，我可以尝试100种不同的类和参数组合，但仍然一无所获——这基本上就是我过去6个小时所做的P

我正试图建立一个自定义的dropzone，因为我不希望整个表单都是可点击的。我已经在这两天了，我真的很接近了（我想是吧？）。然而，我现在也真的被卡住了：我的自定义放置区是不可点击的

我已经把它编成了小提琴：

将图像拖到此处或点击/单击以选择
清楚的
上传

---

Dropzone.autoDiscover=false；
Dropzone.options.formPostPhoto={
url:'file upload.php'，
paramName:'照片'，
自动处理队列：false，
//uploadMultiple:true，
并行上传：4，
maxFiles:4，
最大文件大小：1，
acceptedFiles:'image/*'，
PreviewContainer:“#previews”，
可点击：'.dz可点击'，
init:function（）{
var submitButton=document.querySelector（“btn提交”）
var myDropzone=this；
//删除额外图像
myDropzone.on（'MaxFilesExcepended'，函数（文件）{
此.removeFile（文件）；
});
//告诉dropzone处理所有排队的文件。
submitButton.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
myDropzone.processQueue（）；
});
//为每个图像添加一个删除按钮
this.on（'addedfile'，函数（file，maxFileSize）{
var removeButton=Dropzone.createElement（“”）；
var_this=这个；
//收听单击事件
removeButton.addEventListener（“单击”），函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
_此.removeFile（文件）；
//如果您还想删除服务器上的文件，可以在这里执行AJAX请求。
});
//将按钮添加到文件预览元素。
file.previewElement.appendChild（removeButton）；
});
//仅在添加照片后显示提交按钮
this.on（'addedfile'，function（）{
$（'#btn submit'）.removeClass（'hide'）.show（）；
$（'#btn clear'）.removeClass（'hide'）.show（）；
});
this.on（'sending'，函数（文件）{
//警报（'发送文件'+文件名）
});
this.on（'queuecomplete'，函数（文件）{
警报（'所有文件都已上载！'）
});
//设置按钮的观察者。
var_this=这个；
$（'#btn clear'）。在（'单击'，函数（）上）{
//在这里使用“_this”，因为“this”不再指向dropzone
_这个.removeAllFiles（）；
_此.removeAllFiles（true）；
});
}
};

可能是由于Dropzone不知道在没有action属性的情况下发布到哪里，因此缺少了必需的url选项

请参阅dropzone文档中的以编程方式创建dropzone。例如，我使用以下方法：

<form>     
<div class="dropzone dz-default dz-file-preview dz-clickable" id="my-dropzone">
            <label class="message dz-message">
                <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select
            </label>
        </div>
        </form>
        <button id="submit-all">
          Submit all files
        </button> 
        <script src="{{ STATIC_URL }}js/dropzone.js"></script>
        <script type="text/javascript">
             $("div#my-dropzone").dropzone({ url: "/planner/create" })
              Dropzone.options.myDropzone = {

                    // Prevents Dropzone from uploading dropped files immediately
                    autoProcessQueue : false,

                    init : function() {
                        var submitButton = document.querySelector("#submit-all")
                        myDropzone = this;
                        $("#submit-all").hide();

                        submitButton.addEventListener("click", function() {
                            myDropzone.processQueue();
                            // Tell Dropzone to process all queued files.
                        });

                        // You might want to show the submit button only when
                        // files are dropped here:
                        this.on("addedfile", function() {
                            $("#submit-all").show();
                            // Show submit button here and/or inform user to click it.
                        });

                    }
                };
        </script>

将图像拖到此处或点击/单击以选择
提交所有文件
$（“div#my dropzone”）.dropzone（{url://planner/create}）
Dropzone.options.myDropzone={
//防止Dropzone立即上载删除的文件
自动处理队列：false，
init:function（）{
var submitButton=document.querySelector（“全部提交”）
myDropzone=这个；
$（“#全部提交”）.hide（）；
addEventListener（“单击”，函数（）{
myDropzone.processQueue（）；
//告诉Dropzone处理所有排队的文件。
});
//您可能只想在以下情况下显示“提交”按钮：
//文件将放在此处：
this.on（“addedfile”，function（））{
$（“#全部提交”）.show（）；
//在此处显示提交按钮和/或通知用户单击该按钮。
});
}
};

奇怪，因为我的选项中设置了URL。不管怎样，你所提供的都是有效的。谢谢

<script>
Dropzone.autoDiscover = false;

Dropzone.options.formPostPhoto = {

    url: 'file-upload.php',
    paramName: 'photo',
    autoProcessQueue: false,
    //uploadMultiple: true,
    parallelUploads: 4,
    maxFiles: 4,
    maxFileSize: 1,
    acceptedFiles: 'image/*',
    previewsContainer: '#previews',
    clickable:'.dz-clickable',

    init: function() {

        var submitButton = document.querySelector("#btn-submit")
        var myDropzone = this;

        // remove extra images
        myDropzone.on('maxfilesexceeded', function(file) {
            this.removeFile(file);
        });

        // tell dropzone to process all queued files.
        submitButton.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });

        // add a remove button to each image
        this.on('addedfile', function(file,maxFileSize) {
            var removeButton = Dropzone.createElement('<i class="glyphicon glyphicon-trash text-danger"></i>');
            var _this = this;

            // Listen to the click event
            removeButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                _this.removeFile(file);
            // If you want to the delete the file on the server as well, you can do the AJAX request here.
            });

            // Add the button to the file preview element.
            file.previewElement.appendChild(removeButton);
        });

        // show the submit button only when a photo has been added
        this.on('addedfile', function() {
            $('#btn-submit').removeClass('hide').show();
            $('#btn-clear').removeClass('hide').show();
        });

        this.on('sending', function(file) {
            //alert('Sending the file' +  file.name)
        });

        this.on('queuecomplete', function(file) {
            alert('All files have been uploaded!')
        });

        // Setup the observer for the button.
        var _this = this;
        $('#btn-clear').on('click', function() {
            // Using "_this" here, because "this" doesn't point to the dropzone anymore
            _this.removeAllFiles();
            _this.removeAllFiles(true);
        });
    }
};
</script>

<form>     
<div class="dropzone dz-default dz-file-preview dz-clickable" id="my-dropzone">
            <label class="message dz-message">
                <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select
            </label>
        </div>
        </form>
        <button id="submit-all">
          Submit all files
        </button> 
        <script src="{{ STATIC_URL }}js/dropzone.js"></script>
        <script type="text/javascript">
             $("div#my-dropzone").dropzone({ url: "/planner/create" })
              Dropzone.options.myDropzone = {

                    // Prevents Dropzone from uploading dropped files immediately
                    autoProcessQueue : false,

                    init : function() {
                        var submitButton = document.querySelector("#submit-all")
                        myDropzone = this;
                        $("#submit-all").hide();

                        submitButton.addEventListener("click", function() {
                            myDropzone.processQueue();
                            // Tell Dropzone to process all queued files.
                        });

                        // You might want to show the submit button only when
                        // files are dropped here:
                        this.on("addedfile", function() {
                            $("#submit-all").show();
                            // Show submit button here and/or inform user to click it.
                        });

                    }
                };
        </script>