मैं नोड.जेएस के साथ प्लुपलोड का उपयोग कैसे करूं और अपलोड के प्रतिशत दिखाऊं?

Question

वर्तमान में, मेरा कोड काम करता है। हालांकि, जब कोई फ़ाइल अपलोड की जाती है, तो जावास्क्रिप्ट कोड पर कोई प्रतिशत वापस नहीं भेजा जाता है। (मुझे लगता है कि मेरे सर्वर को वापस प्रतिशत प्रतिशत भेजने की जरूरत है?)

"अपलोड प्रोग्रेस" ईवेंट बस पूर्ण होने पर "0" प्रिंट करता है। ,

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

और बदले बाध्यकारी UploadProgress बाद में की इसे इस तरह init में करते हैं,:

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

बस के लिए यूआरएल को बदलने:

<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 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 (Rohit Kumar द्वारा लिखित)।