HTML+Javascript 读取本地文件系统答案

【问题标题】：HTML+Javascript to read local file systemHTML+Javascript 读取本地文件系统
【发布时间】：2018-11-20 17:55:39
【问题描述】：

我是天生的 Java 开发人员，在客户端编程方面的手非常有限，所以在这里需要帮助。

我基本上是在寻找一种方法来创建单页 HTML/JavaScript 应用程序来读取我的本地文件系统。我想在我的 HTML 页面上列出特定目录中的目录和文件。有什么方法可以实现这一点。

请注意，我想避免服务器端编码或 Web 应用程序之类的东西。只需要纯 HTML 和/或 Javascript 或任何 Javascript 框架来为我执行此操作。而且我需要它主要在 chrome 上工作。

请提出建议。

【问题讨论】：

您不能使用纯脚本来执行此操作，因为这会带来巨大的安全风险。
无法使用客户端代码访问文件系统。您必须编写服务才能做到这一点。
它违反了安全

标签： javascript html google-chrome client-side

【解决方案1】：

虽然在客户端读取文件并不好，但可能会出现很多安全和访问问题。不过，如果您愿意，您可以使用 filereader 在客户端读取文件，请查看以下示例：

<input type="file" id="fileinput" multiple />
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
            console.log(contents);
                    alert( "Got the file.n" 
                          +"name: " + f.name + "n"
                          +"type: " + f.type + "n"
                          +"size: " + f.size + " bytesn"
                          + "starts with: " + contents.substr(1, contents.indexOf("n"))
                    ); 
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>

【讨论】：

谢谢。你能帮我列出给定文件夹中的文件/文件夹吗？这是我的首要任务。稍后我想处理似乎可以使用上述代码的文件。