dropzone.js 引导模式 - 错误：已附加 Dropzone - 当模式加载时

Question

我是 dropzone.js 的新手

我创建了一个页面，该页面使用数据表向用户显示来自不同条目的数据。一旦用户选择了一个条目，就会触发引导模式。 modal from 必须包含一个显示已经在服务器上的文件的 dropzone 区域。

我收到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 有一些很好的支持。

您不必以编程方式创建 Dropzone 的实例 大多数情况！建议启用自动发现，并且 在配置的 init 选项中配置 Dropzone。

请尝试这种方式，这里我没有使用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。你可以自定义选项。请检查一下。并阅读this论坛