5
実際には、index.jsファイルにパス名があります。ディレクトリを選択するたびに、現在のディレクトリ名が表示されます。 node.jsコンソール画面node.jsを使用して現在のディレクトリ名を取得してhtmlページに表示する方法
ここで、そのディレクトリ名をtemplate.htmlページのテキストボックスに表示したいとします。誰もこの問題に関して私を助けてくれますか？
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);
マイindex.js：
#!/usr/bin/env node
var http = require('http');
var _ = require('lodash');
var express = require('express');
var fs = require('fs');
var path = require('path');
var util = require('util');
var program = require('commander');
function collect(val, memo) {
if(val && val.indexOf('.') != 0) val = "." + val;
memo.push(val);
return memo;
}
program
.option('-p, --port <port>', 'Port to run the file-browser. Default value is 8088')
.option('-e, --exclude <exclude>', 'File extensions to exclude. To exclude multiple extension pass -e multiple times. e.g. (-e .js -e .cs -e .swp) ', collect, [])
.parse(process.argv);
var app = express();
var dir = process.cwd();
app.use(express.static(dir)); //app public directory
app.use(express.static(__dirname)); //module directory
var server = http.createServer(app);
if(!program.port) program.port = 8088;
server.listen(program.port);
console.log("Please open the link in your browser http://<YOUR-IP>:" + program.port);
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 {
//console.log("processing ", file);
var isDirectory = fs.statSync(path.join(currentDir,file)).isDirectory();
if (isDirectory) {
data.push({ Name : file, 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, 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.get('/', function(req, res) {
res.redirect('lib/template.html');
});
マイtemplate.html：
index.jsで、この部分で私は、コンソールでパス名を見ることができますよ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
マイapp.js：
(function($){
var extensionsMap = {
".zip" : "fa-file-archive-o",
".gz" : "fa-file-archive-o",
".bz2" : "fa-file-archive-o",
".xz" : "fa-file-archive-o",
".rar" : "fa-file-archive-o",
".tar" : "fa-file-archive-o",
".tgz" : "fa-file-archive-o",
".tbz2" : "fa-file-archive-o",
".z" : "fa-file-archive-o",
".7z" : "fa-file-archive-o",
".mp3" : "fa-file-audio-o",
".cs" : "fa-file-code-o",
".c++" : "fa-file-code-o",
".cpp" : "fa-file-code-o",
".js" : "fa-file-code-o",
".xls" : "fa-file-excel-o",
".xlsx" : "fa-file-excel-o",
".png" : "fa-file-image-o",
".jpg" : "fa-file-image-o",
".jpeg" : "fa-file-image-o",
".gif" : "fa-file-image-o",
".mpeg" : "fa-file-movie-o",
".pdf" : "fa-file-pdf-o",
".ppt" : "fa-file-powerpoint-o",
".pptx" : "fa-file-powerpoint-o",
".txt" : "fa-file-text-o",
".log" : "fa-file-text-o",
".doc" : "fa-file-word-o",
".docx" : "fa-file-word-o",
};
function getFileIcon(ext) {
return (ext && extensionsMap[ext.toLowerCase()]) || 'fa-file-o';
}
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;
});
e.preventDefault();
});
},
"aoColumns": [
{ "sTitle": "", "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> " + data.Name +"</a>";
} else {
return "<a href='/" + data.Path + "' target='_blank'><i class='fa " + getFileIcon(data.Ext) + "'></i> " + data.Name +"</a>";
}
}
}
]
};
var table = $(".linksholder").dataTable(options);
console.log(table);
$.get('/files').then(function(data){
table.fnClearTable();
table.fnAddData(data);
});
$(".up").bind("click", function(e){
if (!currentPath) return;
var idx = currentPath.lastIndexOf("/");
var path =currentPath.substr(0, idx);
$.get('/files?path='+ path).then(function(data){
table.fnClearTable();
table.fnAddData(data);
currentPath = path;
});
});
})(jQuery);
現在の閲覧形式：
必要ブラウズフォーマット： 
本当に私はtextbox.Butにtextbox.Butに現在のディレクトリパスを表示したい、この問題に関して私を助けてくれます... – dev333
私は私の答え： –
ここで私はスラッシュとして値を取得することができます。しかし、現在のディレクトリのパスを取得することはできません。 $ .get（ '/ directory'）。次に（function（data）{ $（ "input [name = 'location']」）.val（data.directory）; }）; – dev333