Wie verwende ich Plupload mit Node.js und zeige die Prozentsätze des Uploads an?

Question

Derzeit funktioniert mein Code. Wenn jedoch eine Datei hochgeladen wird, werden keine Prozentsätze an den JavaScript-Code gesendet. (Ich denke, mein Server muss den Chunk-Prozentsatz zurücksenden?)

Das "UploadProgress" -Ereignis druckt nur "0", wenn es abgeschlossen ist.

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

Das ist mein Backend-Code:

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

Nur URL ändern:

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

und stattdessen UploadProgress später binden kann, tun es in init, wie folgt aus:

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

       } 
      } 
     }); 

Ich testete, es wor ks in deinem Code. Das Gleiche funktioniert nicht mit Bind, was ziemlich seltsam ist. Ich werde es später herausfinden.

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

Client-Code: https://github.com/aishwat/plupload_client/blob/master/examples/custom.html

Und wenn Sie Plupload nicht verwenden wollen, gibt es eine weitere Möglichkeit, XMLHttpRequest Fortschritt Ereignis verwenden, so etwas wie:

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

Hier die node.js code using this approach (geschrieben von Rohit Kumar).