Question

Dropzone.js看起来非常挑剔（任何人都记得SCSI Voodoo？），或文档只是臭：无论什么原因，我可以尝试100种不同的类和参数组合，但仍然无法获得 - 这基本上就是我和＃39;过去6个小时一直在做。：P

我正在尝试构建自定义dropzone，因为我不希望整个表单可以点击。我已经在这两天了，我真的很亲近（我想？）。但是，我现在也陷入了困境：我的自定义放置区域无法点击。

我把它放在一个小提琴中：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

可能是您缺少必需的网址选项，因为Dropzone不知道在没有操作属性的情况下发布的位置。

请参阅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>

Dropzone.js：无法点击自定义预览

1 个答案: