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

目前，我的代码工作。 但是，上传文件时，不会将百分比发送回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); } } }); 

我testing过，它在你的代码中工作。 同样的事情不能用绑定，这很奇怪。 我以后会解决的

服务器代码： 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代码 （由Rohit Kumar编写）。