Javascript 列出静态网页中目录的文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27860507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Listing files of a directory in a static webpage
提问by Bhaskar Malakar
Is there any way to list the files of a directory in a static webpage with the link to view the file?
有没有办法在静态网页中列出目录中的文件，并带有查看文件的链接？
I would like to upload some PDF files to a certain directory of my static website (it uses HTML and JS), and want to show the list of the files in a page with the link to view the pdf files. That way, if I upload new files, I don't have to modify the HTML page every time. Is there any way to do that?
我想将一些 PDF 文件上传到我的静态网站的某个目录（它使用 HTML 和 JS），并希望在带有查看 pdf 文件的链接的页面中显示文件列表。这样，如果我上传新文件，就不必每次都修改 HTML 页面。有没有办法做到这一点？
回答by Olim Saidov
If you are using Apache as a web-server and have configured mod-autoindexfor the directory you upload pdf files then you should probalby see somethink like this when navigation to that url:
如果您使用 Apache 作为网络服务器，并为您上传 pdf 文件的目录配置了mod-autoindex，那么您应该在导航到该 url 时看到类似这样的想法：
This auto-generated page can be easily parsed by js using jquery:
这个自动生成的页面可以很容易地被 js 使用 jquery 解析：
var pdfFilesDirectory = '/uploads/pdf/';
// get auto-generated page
$.ajax({url: pdfFilesDirectory}).then(function(html) {
// create temporary DOM element
var document = $(html);
// find all links ending with .pdf
document.find('a[href$=.pdf]').each(function() {
var pdfName = $(this).text();
var pdfUrl = $(this).attr('href');
// do what you want here
})
});
回答by John Byrne
I made a node module to automate the task of getting all files and folders: mddir
我做了一个节点模块来自动化获取所有文件和文件夹的任务：mddir
Usage
用法
node mddir "../relative/path/"
节点 mddir "../relative/path/"
To install: npm install mddir -g
安装： npm install mddir -g
To generate markdown for current directory: mddir
为当前目录生成降价：mddir
To generate for any absolute path: mddir /absolute/path
为任何绝对路径生成： mddir /absolute/path
To generate for a relative path: mddir ~/Documents/whatever.
生成相对路径：mddir ~/Documents/whatever。
The md file gets generated in your working directory.
md 文件在您的工作目录中生成。
Currently ignores node_modules, and .git folders.
当前忽略 node_modules 和 .git 文件夹。
Troubleshooting
故障排除
If you receive the error 'node\r: No such file or directory', the issue is that your operating system uses different line endings and mddir can't parse them without you explicitly setting the line ending style to Unix. This usually affects Windows, but also some versions of Linux. Setting line endings to Unix style has to be performed within the mddir npm global bin folder.
如果您收到错误“node\r: No such file or directory”，则问题在于您的操作系统使用了不同的行尾，并且 mddir 无法解析它们，除非您将行尾样式明确设置为 Unix。这通常会影响 Windows，但也会影响某些版本的 Linux。必须在 mddir npm global bin 文件夹中将行结尾设置为 Unix 样式。
Line endings fix
行尾修复
Get npm bin folder path with:
使用以下命令获取 npm bin 文件夹路径：
npm config get prefix
npm config get prefix
Cd into that folder
cd 到那个文件夹
brew install dos2unix
brew 安装 dos2unix
dos2unix lib/node_modules/mddir/src/mddir.js
dos2unix lib/node_modules/mddir/src/mddir.js
This converts line endings to Unix instead of Dos
这会将行尾转换为 Unix 而不是 Dos
Then run as normal with: node mddir "../relative/path/".
然后正常运行：node mddir "../relative/path/"。
I made another node module call agd, to generate a tree view based on the other module: https://github.com/JohnByrneRepo/agd.
我创建了另一个节点模块调用 agd，以基于另一个模块生成树视图：https: //github.com/JohnByrneRepo/agd。
Auto generated documentation (Alpha)
自动生成的文档（Alpha）
Functionality so far:
到目前为止的功能：
Generates a tree folder structure in node, that is rendered as a treegrid in the browser. Click on a file (non-root level) to populate main view.
在节点中生成树文件夹结构，在浏览器中呈现为树形网格。单击文件（非根级别）以填充主视图。
Coming soon:
即将推出：
Generates a documentation guide including function names and parameters, function dependencies, and more. Initially compatible with jQuery and plain JavaScript function namespacing, soon to be compatible with React, Redux, Angular 1, Angular 2 and other frameworks on request.
生成文档指南，包括函数名称和参数、函数依赖关系等。最初与 jQuery 和纯 JavaScript 函数命名空间兼容，很快将根据要求与 React、Redux、Angular 1、Angular 2 和其他框架兼容。
Usage
用法
node agd relativePath
节点 agd 相对路径
e.g. node agd '../../'
例如节点 agd '../../'
Generated code.json.
生成的 code.json。
Run 'node http-server' then open the browser to view the file structure rendered in the sidebar. Larger projects can take up to a minute or two to render.
运行“node http-server”，然后打开浏览器查看侧边栏中呈现的文件结构。较大的项目可能需要一两分钟来渲染。
See code.json for example generated data.
有关生成的数据的示例，请参见 code.json。
To-do: Add code content for top level files. Move tree html generation into node.
待办事项：为顶级文件添加代码内容。将树 html 生成移动到节点中。
Contact [email protected]
MIT License
麻省理工学院执照
Example generated tree structure
示例生成的树结构
回答by meskobalazs
You need to have a server-side implementation, you could do this by using PHP for example. You cannot do this with JavaScript, because it is run on the client-side, and cannot access the files on the server.
您需要有一个服务器端实现，例如，您可以使用 PHP 来实现。您不能使用 JavaScript 执行此操作，因为它在客户端运行，并且无法访问服务器上的文件。
回答by Erik van de Ven
You need a combination of javascript and PHP. You could call the PHP file through Javascript, by using an AJAX call. try this PHP file which should return an Json object:
您需要结合使用 javascript 和 PHP。您可以使用 AJAX 调用通过 Javascript 调用 PHP 文件。试试这个应该返回一个 Json 对象的 PHP 文件：
$directory = "/directory/path";
$pdffiles = glob($directory . "*.pdf");
$files = array();
foreach($pdffiles as $pdffile)
{
$files[] = "<a href=$pdffile>".basename($pdffile)."</a>";
}
echo json_encode($files);
Now you just need to loop through the Json object to list the Url's.
现在您只需要遍历 Json 对象以列出 Url。
Something like:
就像是：
$.getJSON( "file.php", function( data ) {
var items = [];
$.each( data, function(val ) {
items.push(val);
});
$( "body" ).append( items );
});
Did not test it, but something like this should work.
没有测试它，但这样的事情应该工作。
回答by Travis Heeter
- Open a browser
- Navigate to the folder you want listed
- If you see a list of the files, continue
- If you don'tsee a list of the files, Take a look at this: Is it possible to get a list of files under a directory of a website? How?to figure out how to do that.
- Make an ajax call to that folder (example below)
responsewill be the html of the listing page- You can parse that out to get the file listing
- 打开浏览器
- 导航到要列出的文件夹
- 如果您看到文件列表，请继续
- 如果您没有看到文件列表，请看一下：是否可以获取网站目录下的文件列表？如何？弄清楚如何做到这一点。
- 对该文件夹进行 ajax 调用（示例如下）
response将是列表页面的 html- 您可以解析它以获取文件列表
Example:
例子：
// This is in angular, but you can use whatever
$http.get('folder_to_list/').success(function(response) {
console.log(response);
});
回答by Zoxman
Be simple. Put all your files in a directory and don't make a homepage of that directory. Then, in the page you want, add an Iframe that shows that directory. Then you will see the list of files you uploaded, all in hyperlinks. When you click on the links, the Iframe will show the PDF files.
简单点。将所有文件放在一个目录中，不要为该目录创建主页。然后，在您想要的页面中，添加一个显示该目录的 Iframe。然后您将看到您上传的文件列表，所有文件都在超链接中。当您单击链接时，Iframe 将显示 PDF 文件。
回答by Kristian Ivanov
Instead of JavaScript, which runs only on the client side, you should consider using PHP or other server language, to crawl your directory of files and list them inside an HTML file/template. PHP for example has scandir function, which can list files in a dicrectory
您应该考虑使用 PHP 或其他服务器语言，而不是仅在客户端运行的 JavaScript，来抓取您的文件目录并将它们列在 HTML 文件/模板中。例如 PHP 有 scandir 功能，它可以列出目录中的文件
