dropzone.js引导模式 - 错误：悬浮窗已经连接 - 时态负载

Question

我是新来dropzone.js

我已经创建了一个使用数据表，从不同的条目中的数据显示给用户的页面。一旦用户选择了一个条目，引导模式就会被触发。来自该模式的模式必须包含一个显示已在服务器上的文件的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有一些很好的支持。

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。您可以自定义选项。请检查一下。并阅读this论坛