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