如何将 Plupload 与 Node.js 一起使用并显示上传百分比?
How do I use Plupload with Node.js and show the percentages of upload?
目前,我的代码有效。但是,上传文件时,不会将百分比发送回 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.');
});
只需将 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);
}
}
});
我测试过,它在你的代码中有效。同样的事情不适用于绑定,这很奇怪。待会再想办法。
服务器代码: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 (written by Rohit Kumar).
目前,我的代码有效。但是,上传文件时,不会将百分比发送回 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.');
});
只需将 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);
}
}
});
我测试过,它在你的代码中有效。同样的事情不适用于绑定,这很奇怪。待会再想办法。
服务器代码: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 (written by Rohit Kumar).