Web开发显示本地文件

Question

根据研究，我找到了一些教程，比如Eric Bidelman的这篇教程，介绍了FileReader的使用方法。这些教程使用用户提供的文件，而不是本地文件。修改这些示例以尝试显示本地文件失败。

经过一番研究，我发现大多数浏览器默认不允许访问本地文件[1]。有些人建议使用不安全的模式进行测试，但这不是我想要的，因为这只适用于我的测试[2]。

目前我允许下载日志文件。我在这里使用FileReader的目的是提供一种查看文件的方法。有办法做到这一点吗?我想出了一些空白，并且几乎已经放弃了只允许下载而不是添加观看。以下是本地文件读取的示例代码。此代码失败，因为'logpath'不是blob类型。我相信我的问题真的不需要代码，但我还是提供了一个例子。

<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">