Question

我打算在我的网页上有一个链接，它会打开一个本地文本文件并显示其内容。这是我到目前为止所尝试的：

<a href='#' onclick='readTextFile("file:///F:/folder1/abc.txt")' title='Summary'><h3>Summary</h3></a>

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

这是我得到的错误：

XMLHttpRequest无法加载file：/// F：/folder1/abc.txt。交叉起源请求仅支持协议方案：http，data，chrome， chrome-extension，https，chrome-extension-resource。

我的网页在本地服务器上本地运行。

是否可以打开和读取本地文件？似乎浏览器应该不允许这样做。

Answer 1

对于符合HTML5标准的网站，您可以使用HTML5提供的新API。

HTML5 FileReader 界面可用于通过熟悉的JavaScript事件处理异步读取文件。它提供以下功能：

readAsText
readAsBinaryString
readAsDataURL
readAsArrayBuffer

请按照此treehouse blog（也包含演示）和this进行参考。

Answer 2

新答案：

仍有可能。

使用chrome
安装tampermonkey扩展
选中该复选框以使其可以访问本地文件。
在其中添加一个脚本，如下所示：

// ==UserScript==
// @name         read localfile
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  read localfile
// @author       blackmiaool
// @match        http://stackoverflow.com/*
// @match        https://stackoverflow.com/*
// @grant        GM_getResourceText
// @resource     b file://C:\Users\blackmiaool\the-path-of-the-file
// ==/UserScript==

(function() {
    'use strict';
    var a=GM_getResourceText("b");
    console.log("The file's content is ",a);
})();

请记住纠正文件路径，并在此页面上进行测试。

旧答案：

当然可以。如果您的index.html文件位于＆＃34; /some-path/index.html" ;,只需将您的abc.txt放在＆＃34; /some-path/abc.txt"。并更改＆＃34; file：/// F：/folder1/abc.txt"到＆＃34; ./ abc.txt＆＃34;。

Answer 3

简单＆＃34;不，您无法从计算机本地部署的服务器上读取任何文件。＆＃34;要访问任何资源，必须在服务器上具有可用资源。您当前页面的投放地点。

Answer 4

该文件需要在您的Web应用程序中链接到它。允许javascript访问应用程序外部的计算机存在安全风险，不允许使用。后端进程可以读取文件，然后为您提供结果，但您无法直接从javascript读取到计算机上的文件

如何打开本地文本文件并在浏览器中显示内容？

4 个答案: