Dropzone.js 上传后处理文件并监控进度

Question

标题说明了一切，我需要监控数据处理进度。例如，我对 MySQL 进行了一些分块插入，并在每个块之后回显进度，如何在 front-end 中打印进度？我正在使用 Dropzone.js，我当前的 JS 代码是（简化版）：

Dropzone.options.importdropzone = {

                init: function() {

                    // I need something like
                    this.on("backendProccessing",function(response){
                      return response
                    })

                    this.on("success", function(file, response) {
                        // Success only return after backend finish process
                    })

                }
            };

也试过了（没用，没有返回，只有成功）：

this.on('xhr',function(){

  // get the native XmlHttpRequest object
  var xhr = $.ajaxSettings.xhr() ;
  // set the onprogress event handler
  xhr.onprogress = function(evt){ console.log('Doing') } ;
  // set the onload event handler
  xhr.onload = function(){ console.log('DONE!') } ;
  // return the customized object
  return xhr ;

});

所以我需要这样的东西：

this.on("backendProccessing",function(response){
  return response
})

Answer 1

好吧，接缝是不可能的，我需要稍微改变一下后端。所以我在后端创建了另一种方法来监视当前进度，进度是在会话中设置的，所以我需要 2 个 AJAX cals，1 个用于上传 ant 开始处理文件，另一个用于检查状态。

例如处理 URL 是 http://example.com/import 用于状态检查 http://example.com/import/status

我可以检查状态直到 return 特定值，比如

{
  "status":"done"
}

我每 1 秒调用一次检查状态函数

this.on('sending',function() {
  // calling another ajax here every x sec.
}

Dropzone.js 上传后处理文件并监控进度

Dropzone.js proccess file after upload and monitor progress

ajax

jquery

dropzone.js