ドロップゾーン：私は次のコードでdropzone.jsで複数のファイルをアップロードしながら、現在のファイル名を表示したいアップロード

Question

中に現在のファイル名を表示します。

dropzone.on("uploadprogress", function(file, parameter, bytes){ 

    //update progressbar, that works    
    $('#progress').css("width", parameter + "%").html(parseInt(parameter) + " %");  

    //prints the correct filenames 
    console.log(file.name); 

    //does not work: only last file.name in queue is shown, 
    //even in a real server environment where i upload many files 
    $('#currentFile').html(file.name);   

}); 

HTML：それはどのように行われるか

<div class="progress-bar" id="progress"/></div>    
<span id="currentFile"></span> 

、currentFileは実際にアップロードされた現在のファイルと一致していますか？前もって感謝します。

Answer 1

あなたのコードはうまくいくはずです。私が見る唯一の問題は、ファイルが同時にアップロードされていることです。表示されるファイルは、異なるファイル間で切り替えることができます。uploadProgressイベントは、これは重複する可能性があります。このため、最後にアップロードされたファイルのデータしか表示されません。限り

Dropzone.options.myDropzone = { 
    url: 'yourUrl', 
    autoProcessQueue: false, 
    parallelUploads: 1, 
    init: function() { 
     var mydrop = this; // Closure 

     // This is the event listener that triggers the start of the upload 
     $('#yourSubmitButtonId').on('click', function(){ 
      mydrop.processQueue(); 
     }); 

     this.on('success', function(file){ 

      // Just to see default server response on console 
      console.log(file.xhr.responseText); 

      // Continue processing the queue if there are still files pending 
      if (this.getQueuedFiles().length > 0) { 
       this.processQueue(); 
      } else { 
       console.log('Job done'); 
      } 

     }); 

     this.on('uploadprogress', function(file, parameter, bytes){ 

      //update progressbar, that works    
      $('#progress').css("width", parameter + "%").html(parseInt(parameter) + " %");  

      //prints the correct filenames 
      console.log(file.name); 

      //does not work: only last file.name in queue is shown, 
      //even in a real server environment where i upload many files 
      $('#currentFile').html(file.name);   

     }); 
    } 
};