加载文件夹内容

Question

有没有办法用javascript读取某些文件夹的内容？ 例如： 我有一个文件夹和一些file.txt，我想自动列出html中的所有项目。

我希望HTML自动列出所有内容：

    <ul id="folder1">
      <li>1.txt</li>
      <li>2.txt</li>
      <li>3.txt</li>
      <li>4.txt</li>
    </ul>

Answer 1

在浏览器中运行的纯JavaScript代码无法访问本地文件系统，因此您应该在NodeJS中运行JavaScript并将文件系统结构输出为纯html。

这是示例代码：

const http = require('http');
const fs = require('fs');

// create the server object
http.createServer(function(req, resp) {
    files = fs.readdirSync(".");

    for (var i = 0; i < files.length; i++) {
        var line = "<div><a href='#'>"+ files[i] +"</a></div>";
        resp.write(line);
    }

    resp.end();
}).listen(8080);

将此代码保存为app.js并使用：node app.js运行它，然后打开浏览器到http://localhost:8080，您将在浏览器中看到本地文件系统。

Answer 2

当然可以，只需使用<input type="file" directory multiple>，但请确保将所有directory attributes与供应商前缀webkit，moz，ms和{一起使用{1}}来解释所有实施，因为this is technically a non-standard feature：

＆＃13;

＆＃13;

o

＆＃13;

const input = document.querySelector('input')
const ul = document.querySelector('ul')

input.addEventListener('change', function () {
  while (ul.children.length > 0) {
    ul.firstElementChild.remove()
  }
  
  for (const file of this.files) {
    const li = document.createElement('li')

    // fallback if non-standard property does not exist
    li.textContent = file.webkitRelativePath || file.name
    ul.append(li)
  }
})

＆＃13;

＆＃13;

＆＃13;

Answer 3

通过在浏览器中执行的直接Javascript，没有。您需要做的是使服务器上的文件夹可访问，然后使用JS代码将其作为AJAX调用或类似的东西读取。

如果您正在使用命令行JS（如Node.js或类似的东西），您可以访问文件系统并读取文件。 Node.js使用fs包。