如何在瀏覽器中使用node.js獲取文件的下載狀態

Question

在index.js中，我使用下面的代碼來下載文件並在控制檯中顯示該文件的狀態。

但是，現在我嘗試使用node.js.Can請人幫我了關於這個問題，以顯示在瀏覽器文件的狀態...

我index.js：

//Downloads the file and shows the status in the console 
    var request = require('request'); 
    var progress = require('request-progress'); 
    var DOWNLOAD_DIR = '/usr/local/'; 
    var file_name = 'newgoogle.png' 

    var callback = function(state){ 
     console.log('received size in bytes', state.received); 
     console.log('total size in bytes', state.total); 
     console.log('percent', state.percent); 

    } 

    progress(request('https://www.google.com/images/srpr/logo3w.png'), { 
     throttle:0, 
     delay: 0  
    }) 
    .on('progress', callback) 

    .pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name)) 
    .on('error', function (err) { 
    console.log("error"); 
    }) 
    .on('close', function (err){ 
    console.log("Download Complete"); 
    }) 

//Lists all the files and folders in the filesysytem 
app.get('/files', function(req, res) { 


var currentDir = dir; 
var query = req.query.path || ''; 
if (query) currentDir = path.join(dir, query); 
console.log("browsing ", currentDir); 

fs.readdir(currentDir, function (err, files) { 
    if (err) { 
     throw err; 
     } 
     var data = []; 
     files 
     .filter(function (file) { 
      return true; 
     }).forEach(function (file) { 
     try { 
       var stats = fs.statSync(path.join(currentDir,file)); 
       var time = stats["atime"]; 
       var date = time.toString().substr(4,11); 

       var isDirectory = fs.statSync(path.join(currentDir,file)).isDirectory(); 
       if (isDirectory) { 
        data.push({ Name : file,Date : date, IsDirectory: true, Path : path.join(query, file) }); 
       } else { 
        var ext = path.extname(file); 
        if(program.exclude && _.contains(program.exclude, ext)) { 
        console.log("excluding file ", file); 
        return; 
        }  
        data.push({ Name : file,Date:date, Ext : ext, IsDirectory: false, Path : path.join(query, file) }); 
       } 

     } catch(e) { 
      console.log(e); 
     }   

     }); 
     data = _.sortBy(data, function(f) { return f.Name}); 
     res.json(data); 
    }); 
}); 

這裏，在app.js中，我試圖在數據表中顯示數據。

我app.js：

var currentPath = null; 
    var options = { 
     "bProcessing": true, 
     "bServerSide": false, 
     "bPaginate": false, 
     "bAutoWidth": false, 
     "sScrollY":"250px", 
     "fnCreatedRow" : function(nRow, aData, iDataIndex) { 
    if (!aData.IsDirectory) return; 
    var path = aData.Path; 
    $(nRow).bind("click", function(e){ 
     $.get('/files?path='+ path).then(function(data){ 
      table.fnClearTable(); 
      table.fnAddData(data); 
      currentPath = path; 
     }); 


     $.get('/directory?path='+ path).then(function(data){   
      $("input[name='location']").val(data.directory); 
      //$("#showDiv").hide(); 
     });   
    e.preventDefault(); 
    }); 
}, 



     "aoColumns": [{"sTitle":"File Name", "mData": null, "bSortable": false, "sClass": "head0", "sWidth": "55px", 
      "render": function (data, type, row, meta) { 
       if (data.IsDirectory) { 
       return "<a href='#' target='_blank'><i class='fa fa-folder'></i>&nbsp;" + data.Name +"</a>"; 
       } else { 
       return "<a href='/" + data.Path + "' target='_balnk'><i class='fa " + getFileIcon(data.Ext) + "'></i>&nbsp;" + data.Name +"</a>"; 
       } 
      } 
      }, 
      {"sTitle":"Date",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "55px", 
      "render": function (data, type, row, meta) { 
       if (data.IsDirectory) { 
       return data.Date; 
      }else{ 
       return data.Date; 

      } 
      } 
      }, 
     {"sTitle":"Status",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "55px", 
      "render": function (data, type, row, meta) { 
       if (data.IsDirectory) { 
       return ""; 
      }else{ 
       return ""; 

      } 
      } 
      } 
     ] 

    }; 

    var table = $(".linksholder").dataTable(options); 

    $.get('/files').then(function(data){ 
     table.fnClearTable(); 
     table.fnAddData(data); 
    }); 

$.get('/directory').then(function(data){   
    $("input[name='location']").val(data.directory); 
    $("#showDiv").hide(); 
}); 

我目前的格式：

Answer 1

您將需要使用Socket.IO，對你的進步的回調函數，這是保持一致的溝通，正確的方法客戶端到服務器之間。