Come utilizzare Plupload con Node.js e mostrare le percentuali di caricamento?

Question

Attualmente, il mio codice funziona. Tuttavia, quando un file viene caricato, non viene restituita alcuna percentuale al codice javascript. (Suppongo che il mio server debba restituire la percentuale del chunk?)

L'evento "UploadProgress" stampa "0" quando è completo.

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

Questo è il mio codice di backend:

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

Basta cambiare url:

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

e, invece di legare UploadProgress tardi, farlo in init, come questo:

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

       } 
      } 
     }); 

Ho provato, è vero ks nel tuo codice. La stessa cosa non funziona con il binding, che è piuttosto strano. Lo scoprirò più tardi.

codice

Server: https://github.com/aishwat/plupload_server

Codice cliente: https://github.com/aishwat/plupload_client/blob/master/examples/custom.html

E se non si desidera utilizzare Plupload, c'è un altro modo tramite XMLHttpRequest evento progress, qualcosa di simile:

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

Ecco il node.js code using this approach (scritto da Rohit Kumar).