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，这里有一个例子：< / p>

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：上传时显示当前文件名

1 个答案: