dropzone.js bootstrap modal - Error: Dropzone already attached - when modal loads

Question

我是 dropzone.js

的新手

我创建了一个页面，该页面使用数据表向用户显示来自不同条目的数据。一旦用户选择了一个条目，就会触发 bootstrap 模态。来自的模态必须包含一个显示服务器上已有文件的拖放区。

我收到 Error: Dropzone already attached. 错误。我在脚本的开头设置了 Dropzone.autoDiscover = false; 。

所以对于第一个选择的项目，模态打开时显示信息，如果之后选择另一个项目，模态不会打开，我得到错误 Dropzone already attached

我的模态

<!-- Bootstrap modal - Add/Edit -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Disbursement</h3>
        </div>
        <div class="modal-body form">
           <div id="the-message"></div>
            <form action="#" id="form" class="form-horizontal">
                <input type="hidden" value="" name="disb_id"/>
                <div class="form-body">
                    <div class="form-group">
                        <label class="control-label col-md-3">Date</label>
                        <div class="col-md-9">
                            <input name="dod" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Description</label>
                        <div class="col-md-9">
                            <textarea name="descript" placeholder="Description" class="form-control"></textarea>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    </form>
                    <div class="form-group">
                        <div class="col-md-12">
                        <!--Add Dropzone here-->
                        <div id="disb_drop" class="dropzone"></div>
                        <div id="receipt"></div>
                        </div>
                    </div>
                </div>
        </div>
        <div class="modal-footer">
            <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我的JS

Dropzone.autoDiscover = false;
    //some code for datatable...        
function edit_disburs(id)
{
    save_method = 'update';
    //reset_form


    function dist_cal(){ //some code
    }

    function calVAT(){ // some code         
    }

    function getReceipt(fileID){

        var myDropzone = new Dropzone('div#disb_drop',{
            url : "<?php echo site_url("disburs/upload"); ?>",
            acceptedFiles: "image/*",
            addRemoveLinks: true,
            dictDefaultMessage: "Drop files here to upload or Click here",
            enqueueForUpload: true,
        },
        function(){
            var self = this;
            $.getJSON("<?php echo site_url("disburs/list_files") ?>/" + fileID, function(data){
                if(data.length > 0){
                console.log(data)
                    $.each(data, function(key,value) {
                        alert(console.log( "index", key, "value", value ));
                        var mockFile = { name: value.name, size: value.size };
                        self.emit("addedfile", mockFile);
                        self.emit("thumbnail", mockFile, "<?php echo base_url()."upload_disbursments/"; ?>" + value.name);
                        self.createThumbnailFromUrl(mockFile, "<?php echo base_url()."upload_disbursments/"; ?>" + value.name);
                        self.emit("complete", mockFile);
                    });
                }
            });
        });
    }


  //Ajax Load data from ajax
  $.ajax({
    url : "<?php echo site_url('disburs/ajax_edit/')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {
        getReceipt(data.receipt);
        //some code to assign data to inputs

        }

        $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Edit Disbursement'); // Set title to Bootstrap modal title

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Please select an entry to edit');
    }
});
}

Answer 1

我发现 Dropzone 对 PHP.

有很好的支持

You don't have to create an instance of Dropzone programmatically in most situations! It's recommended to leave autoDiscover enabled, and configure your Dropzone in the init option of your configuration.

请试试这个，这里我没有用Dropzone.autoDiscover = false; 我用过这种方式。

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

希望对您有所帮助。

Dropzone.options.myAwesomeDropzone = {
        paramName: "file",
        maxFilesize: 10,
        url: 'UploadImages',
        previewsContainer: "#dropzone-previews",
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 20,
        init: function () {
            var cd;
            this.on("success", function (file, response) {
                $('.dz-progress').hide();
                $('.dz-size').hide();
                $('.dz-error-mark').hide();
                console.log(response);
                console.log(file);
                cd = response;
            });

              .......

我做了一个fiddle for you.You can customize the options. please check it out. And read this论坛

dropzone.js bootstrap modal - Error: Dropzone already attached - when modal loads

dropzone.js bootstrap modal - Error: Dropzone already attached - when modal loads

jquery

twitter-bootstrap

bootstrap-modal

dropzone.js