Question

我有一个本地文本文件，其他程序不断更改。我想写一个基于HTML和javascript的网页来动态显示文件的内容。我在谷歌搜索过，发现大多数解决方案需要通过html元素获取此文本文件。我想知道是否有办法通过javascript中的固定路径（假设它是文件目录的字符串）获取文件。我正在使用Javascript fileReader。任何帮助将不胜感激。

Answer 1

使用在浏览器中运行的javascript无法做到这一点。您将无法在浏览器之外执行任何操作。

编辑：

您可以运行Node.js服务器，尽管它在localhost上运行并执行您想要的文件操作。您可以构建一个API，以便在浏览器中加载的html页面调用您的serverscript来执行文件操作。

你明白我的意思吗？

Answer 2

文本文件包含多少信息，根据您的方案，可能值得查看javascript localstorage W3SCHOOLS local storage。这有助于你的情况吗？

Answer 3

您可以做的是允许用户使用文件输入选择感兴趣的文件。完成后，即使JS无法访问文件的完整路径，浏览器也可以访问该文件。

一旦用户选择了该文件，您就可以重新加载它并随意刷新视图。

这是一个简短的演示，使用文件输入（<input type='file'/>）和iframe。您可以选择浏览器通常会显示的任何内容，但是文件大小有限制 - 由于URL的长度限制 - 文件的数据将变为数据网址和该网址被设置为iframe的来源。

作为演示，选择一个文件然后加载它。现在，在另一个程序中打开该文件并进行更改。最后，再次按下加载按钮 - 新内容现在填充iframe。您可以通过计时器或页面中的任何其他事件触发文件加载。据我所知，你无法重新加载它，因为没有来自操作系统的通知 - 你必须使用按钮，计时器，元素事件或其他。基本上，您必须轮询更改。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    // uncomment this line for on-demand loading.
    byId('loadBtn').addEventListener('click', onLoadBtnClick, false);
}

// fileVar is an object as returned by <input type='file'>
// tgtElem is an <iframe> or <img> element - can be on/off screen (doesn't need to be added to the DOM)
function loadFromFile(fileVar, tgtElem)
{
    var fileReader = new FileReader();
    fileReader.onload = onFileLoaded;
    fileReader.readAsBinaryString(fileVar);
    function onFileLoaded(fileLoadedEvent)
    {
        var result,data;
        data = fileLoadedEvent.target.result;
        result = "data:";
        result += fileVar.type;
        result += ";base64,";
        result += btoa(data);
        tgtElem.src = result;
    }
}

function onLoadBtnClick(evt)
{
    var fileInput = byId('mFileInput');
    if (fileInput.files.length != 0)
    {
        var tgtElem = byId('tgt');
        var curFile = fileInput.files[0];
        loadFromFile(curFile, tgtElem);
    }
}

</script>
<style>
</style>
</head>
<body>
    <button id='loadBtn'>Load</button><input id='mFileInput' type='file'/><br>
    <iframe id='tgt'></iframe>
</body>
</html>

Answer 4

如果您只想查看文件更改及其内容，可以使用nodejs使用watchfile模块监视文件更改。您可以使用节点运行以下代码，但它只会控制终端中更改的文件。

    var fs=require('fs'); 
    fs.watchFile('message.text', function (curr, prev) { //listens to file change
            fs.readFile('message.text', function(err,data){ //reads the file
                console.log(data.toString()); //consoles the file content
            });
          });

Javascript动态显示本地文件

4 个答案: