Web 开发显示本地文件

Question

根据研究，我找到了有关 FileReader 用法的教程 such as this one from Eric Bidelman。这些教程使用用户提供的文件而不是本地文件。修改这些示例以尝试显示本地文件未成功。

经过一些研究，我发现默认情况下大多数浏览器不允许访问本地文件[1]. Some recommend using unsafe modes for testing, but that's not what I'm looking for as that would apply to only my testing [2]。

目前我允许下载日志文件。我对 FileReader 的目标是提供一种查看文件的方法。有没有办法做到这一点？我想出了空白，几乎已经辞职只允许下载而不是添加查看。下面是读取本地文件的示例代码。此代码失败，因为 'logpath' 不是 blob 类型。我相信我的问题并不需要代码，但我还是提供了一个示例。

HTML代码

<select name="loglist" id="loglist" onchange="run()" size="2">
    <option>stack1.log</option>
    <option>stack2.log</option>
</select>

Javascript

function run() {
    var reader = new FileReader();

    log = document.getElementById( "loglist" ).value;
    var logdir = "/var/log/";
    var logpath = logdir.concat(log);

    reader.onload = function() {
        logtext = reader.result;
        alert(logtext);
    }
    reader.readAsText(logpath);
}

Answer 1

当 用户选择文件时，嵌入网页的 JavaScript 无法通过 File API 访问用户本地系统上的文件一个文件输入。页面不可能提供要打开的文件名。

var inp = document.querySelector("input");
inp.addEventListener("change", show);

function show(e) {
  var f = this.files[0];
  var r = new FileReader();
  r.addEventListener("load", display);
  r.readAsText(f);

  function display(e) {
    document.body.appendChild(
      document.createTextNode(
        e.target.result
      )
    );
  }
}

<input type="file" id="input">

Web 开发显示本地文件

Web Development Displaying Local Files

javascript

filereader