Node.jsでPluploadを使用し、アップロードのパーセンテージを表示するにはどうすればよいですか？

Question

現在、私のコードが動作します。ただし、ファイルがアップロードされると、割合はJavaScriptコードに戻されません。 （私のサーバーは、チャンクのパーセンテージを返す必要があると思います）

"UploadProgress"イベントが完了すると、単に「0」が出力されます。

<script> 
    $(function(){ 
     $("#button_holder").show(); 
     var uploader = new plupload.Uploader({ 
      runtimes : 'html5,flash,silverlight,html4', 
      browse_button : 'pickfiles', 
      container : 'button_holder', 
      multi_selection: true, 
      url : '/upload', 
      flash_swf_url : '/js/plupload/js/Moxie.swf', 
      silverlight_xap_url : '/js/plupload/js/Moxie.xap', 
     }); 

     uploader.bind('FilesAdded', function(up, files) { 
      $("#button_holder").hide(); 

      plupload.each(files, function(file) { 
       var item = '<div class="upload_item" id="' + file.id + '">' + '<b class="percent"></b></div>' + file.name + ', ' + plupload.formatSize(file.size) + '</div>' 
       $("#progress_holder").append(item); 
      }); 

      uploader.start(); 
      return false; 
     }); 

     uploader.bind('FileUploaded', function(uploader, file, response){ 
      if(response.status == 200){ 
       var icon = "<i class='fa fa-check fa-fw'></i>"; 
      }else{ 
       var icon = "<i class='fa fa-times fa-fw'></i>"; 
      } 
      var html = '<div class="success_item">' + icon + ' ' + file.name + '</div>'; 
      $("#progress_holder").append(html); 
     }); 

     uploader.bind('UploadComplete', function(uploader, files){ 
     }); 

     uploader.bind('UploadProgress', function(up, file) { 
      console.log(file.percent); //just says "0" 
      $("#" + file.id).first(".percent").html(file.percent + "%"); 
      return false; 
     }); 
     uploader.init(); 
    }); 
</script> 

これは私のバックエンドのコードです：

var express = require('express'); 
var Pluploader = require('node-pluploader'); 
var ejs = require('ejs'); 
var bodyParser = require('body-parser') 
var request = require('request'); 
var http = require('http'); 


var app = express(); 
app.set('views','/home/user/heaven/templates'); 
app.set('view engine', 'ejs'); 
app.use(bodyParser.urlencoded({ extended: true})); 
app.use(bodyParser.json()); 
app.use(express.static('/home/user/heaven/media')); 



var pluploader = new Pluploader({ 
    uploadLimit: 100, //MB 
    uploadDir: '/home/user/heaven/uploads' 
}); 

pluploader.on('fileUploaded', function(file, req) { 
    console.log(file); 
}); 
pluploader.on('error', function(error) { 
    throw error; 
}); 

app.post('/upload', function(req, res){ 
    pluploader.handleRequest(req, res); 
}); 

app.get('/', function (req, res) { 
    res.render('index', {}); 
}); 

var server = app.listen(3000, function() { 
    console.log('Listening to server.'); 
}); 

Answer 1

だけにURLを変更します。

url : 'http://127.0.0.1:3000/upload' 

との代わりに、後でUploadProgressを結合、INITでそれを行う、次のように：

var uploader = new plupload.Uploader({ 
      runtimes: 'html5,flash,silverlight,html4', 
      browse_button: 'pickfiles', 
      container: 'button_holder', 
      multi_selection: true, 
      url: 'http://127.0.0.1:3000/upload', 
      flash_swf_url: '/js/plupload/js/Moxie.swf', 
      silverlight_xap_url: '/js/plupload/js/Moxie.xap', 
      init: { 
       UploadProgress: function(up, file) { 
        console.log('file%: '+file.percent); 

       } 
      } 
     }); 

私がテストしたところ、それはworあなたのコードのks。同じことがバインドでは機能しません。これはかなり奇妙です。私は後でそれを理解するでしょう。

Serverコード：https://github.com/aishwat/plupload_server

クライアントコード：https://github.com/aishwat/plupload_client/blob/master/examples/custom.html

そして、あなたはPluploadを使用したくない場合は、XMLHttpRequestの進捗イベントを使用して別の方法があります、のようなもの：

xhr.upload.addEventListener("progress", function (evt) {}); 

はここですnode.js code using this approach（Rohit Kumarによって書かれている）。