Dropzone.js：無法單擊自定義預覽

Question

Dropzone.js看起來異常難以理解（任何人還記得SCSI Voodoo嗎？），或者文檔只是發臭：無論出於什么原因，我都可以嘗試100種不同的類和參數組合，但仍然無法得到任何結果-基本上這就是我一直在做的事情過去6個小時的表現。 ：P

我正在嘗試構建自定義的放置區，因為我不希望整個表單都可單擊。 我已經待了兩天了，真的很近（我認為嗎？）。 但是，我現在也很困：我的自定義放置區不可點擊。

我把它擺成一個小提琴： http : //jsfiddle.net/timgavin/Labn3qg4/

<form id="form-post-photo" method="post" enctype="multipart/form-data" role="form" accept-charset="UTF-8"> 
     <div class="dropzone dz-clickable dz-default dz-file-preview" id="previews">
        <div class="dz-message">
            <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="caption" id="caption" class="form-control" placeholder="Caption (optional)">
    </div>
    <button type="button" id="btn-clear" class="btn btn-danger">Clear</button>
    <button type="submit" id="btn-submit" class="btn btn-default">Upload</button>
</form>

---

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

Answer 1

可能是您缺少必需的url選項，因為Dropzone在沒有action屬性的情況下不知道在哪里發布。

請參考dropzone文檔中的以編程方式創建dropzones 。 例如，我正在使用以下內容：

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