如何使用Plupload和Node.js并显示上传的百分比？

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 : 'http://127.0.0.1:3000/upload' 

和，而不是后来结合UploadProgress，这样做在初始化，就像这样：

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

       } 
      } 
     }); 

我测试过了， 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编写）。