如何从浏览器打开本地文件？

Question

当我尝试打开本地文件时，我使用以下内容：

<a href="file:///Users/username/Dropbox/Documents/a/some document.numbers">some document</a>

当我在浏览器中单击以上内容时，它会打开Finder到文件夹。但是不会打开文件。我是否需要做其他操作才能使文件在Numbers中打开？

- 4thSpace

Answer 1

您不能在客户端打开本地文件。这将是一个巨大的安全风险。

您可以链接到服务器上的文件（就像您所做的那样），或者您可以使用<input type="file">请求客户端文件。

- SourceOverflow

---

澄清一下：我指的是以与您当前使用<a>标签链接的方式。客户端将安装浏览器扩展程序，允许打开其他程序（例如Skype所拥有的）。 - SourceOverflow

这是我的本地计算机，所以安全性不是问题。<input type="file"> 如何打开文件？似乎比单击链接要麻烦得多。 - 4thSpace

不，它的目的是上传文件，如果你只有本地文件（没有服务器），那么可以访问这些文件，但我不知道 .number 文件。其他评论已经很好地解释了这一点。 - SourceOverflow

Answer 2

您只能在浏览器中打开某些类型的文件，例如 html、css、js 和 mp4，否则浏览器将会提示下载。同时请记住，浏览器会使用 %20 替换空格。我建议右键单击文件并使用 Chrome 打开，然后复制该链接并使用它。

只要另一个文件所在的文件是本地的，您就可以打开本地文件。

- DrBrad

---

那怎么比直接提供纯文本链接更容易呢？ - SourceOverflow

由于问题很可能在于URL链接不正确，但也有可能是文件类型的问题。将文件更改为.txt格式可能会解决此问题。 - DrBrad

不，这是不被允许的。HTML代码没有问题。你不能从网站打开另一个程序。 - SourceOverflow

如果这不是一个网站，而只是个人电脑上的文件，则可以在用户电脑上打开任何目录中的文件。如果他想要制作一个网站，那么你当然是正确的，除非他制作一个允许这样做的扩展程序。 - DrBrad

看起来你是对的。通常，如果你需要一个程序或类似的东西，你会设置一个本地服务器，在那里它需要在服务器文件中。但如果你不这样做，你确实是正确的，我很抱歉。 - SourceOverflow

Answer 3

HTML5中的文件API现在允许您直接从JS处理本地文件（在选择文件后进行基本用户交互以确保安全）。根据Mozilla文件API文档，"File"接口提供有关文件的信息，并允许Web页面中的JavaScript访问其内容。通常情况下，"File"对象是从"FileList"对象中检索出来的，这些对象是由用户使用"input"元素选择文件、拖放操作的"DataTransfer"对象或者在"HTMLCanvasElement"上使用"mozGetAsFile()" API返回的。有关更多信息和代码示例，请参见同一文章链接的示例演示。

- brichins

Answer 4

您的问题可能是文档名称中有空格。请尝试以下方式：

<a href="file:///Users/username/Dropbox/Documents/a/some%20document.numbers">some document</a>

浏览器会将 %20 识别为一个空格。

更新
另一个回答指出了我忽略的一些内容。.numbers 扩展名将无法直接由您的浏览器打开。此外，其他答案还描述了这可能带来的安全风险。

- Justin

Answer 5

这里提供一种客户端和服务器端共同下载本地文件的替代方式：

 <a onclick='fileClick(this)' href="file://C:/path/to/file/file.html"/>

js:

function fileClick(a) {

    var linkTag = a.href;
    var substring = "file:///";
    if (linkTag.includes(substring)) {
        var url = '/v/downloadLocalfile?path=' + 
     encodeURIComponent(linkTag);
        fileOpen(url);
    }
    else {
        window.open(linkTag, '_blank');
    }
}

function fileOpen(url) {
    $.ajax({
        url: url,
        complete: function (jqxhr, txt_status) {
            console.log("Complete: [ " + txt_status + " ] " + jqxhr);
            if (txt_status == 'success') {
                window.open(url, '_self');
            }
            else {
                alert("File not found[404]!");
            }
            // }
        }
    });
}

服务端 [Java]:

 @GetMapping("/v/downloadLocalfile")
  
  public void downloadLocalfile(@RequestParam String path, HttpServletResponse 
    response) throws IOException, JRException {
     try {
      String nPath = path.replace("file:///", "").trim();
      File file = new File(nPath);
      String fileName = file.getName();
    
      response.setHeader("Content-Disposition", "attachment;filename=" +  
       fileName);
      if (file.exists()) {
        FileInputStream in = new FileInputStream(file);
        response.setStatus(200);
        OutputStream out = response.getOutputStream();
        byte[] buffer = new byte[1024];

        int numBytesRead;
        while ((numBytesRead = in.read(buffer)) > 0) {
            out.write(buffer, 0, numBytesRead);
        }
        // out.flush();
        in.close();
        out.close();
    }
    else {
        response.setStatus(404);
    }
  } catch (Exception ex) {
     logger.error(ex.getLocalizedMessage());
  }
return;
}

- Mayen

Answer 6

这可能不是您想要做的事情，但有人可能会发现它很有用：

如果您想要分享一个网络文件的链接（例如通过电子邮件），您可以像这样操作：

file:///Volumes/SomeNetworkFolder/Path/To/file.html

然而，这也需要接收者在Finder中连接到网络文件夹 --- 在菜单栏中，

前往 > 连接服务器，

输入服务器地址（例如file.yourdomain.com - "SomeNetworkFolder"将在此目录中），然后点击连接。现在上面的链接应该可以工作了。

- Matthew

Answer 7

通过使用http服务器，您可以在浏览器中公开整个文件系统。

caddy2服务器

caddy file-server --listen :2022 --browse --root /

• 在 http://localhost:2022/ 上提供根文件系统服务

Python3 内置服务器

python3 -m http.server

• 在http://localhost:8000/上提供当前目录的服务

Python2内置服务器

python3 -m SimpleHTTPServer

• 在 http://localhost:8000/ 上为当前目录提供服务

这将

- ccpizza