dropzone：上传时显示当前文件名

Question

我想在使用 dropzone.js 上传多个文件时显示当前文件名，代码如下：

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

你的代码应该工作得很好，我看到的唯一问题是 dropzone 同时上传文件，这可以让你的显示在不同文件之间快速切换，因为 uploadProgress 事件独立触发所有正在上传的文件，这可能会相互重叠，这可能会导致您只能看到正在上传的最后一个文件的数据。

我能想到的唯一解决方案是让 dropzone 一次上传一个文件，我假设您手动开始上传过程，autoProcessQueue 设置为 false，这里是一个例子:

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);         

        });  
    }
};

dropzone：上传时显示当前文件名

dropzone: display current filename during upload

javascript

jquery

dropzone.js