Javascript动态显示本地文件

Javascript dynamically show local file

本文关键字：文件 动态显示 Javascript      更新时间：2023-09-26

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

使用在浏览器中运行的javascript是不可能的。您将无法在浏览器之外执行任何操作。

编辑：

您可以运行 Node.js 服务器，该服务器在本地主机上运行并执行所需的文件操作。您可以构建一个 API，以便在浏览器中加载的 html 页面调用服务器脚本来执行文件操作。

你明白我的意思吗？

文本文件包含多少信息， 根据您的方案，可能值得研究JavaScript本地存储W3SCHOOLS本地存储。这对你的情况有帮助吗？

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

用户选择文件后，您可以重新加载它并根据需要随时刷新视图。

这是一个简短的演示，使用文件输入(<input type='file'/>(和iframe。你可以选择浏览器通常会显示的几乎任何内容，尽管对文件的大小有限制 - 由于URL长度的限制 - 文件的数据被转换为数据URL，并且该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>

如果您只想观察文件更改及其内容，则可以使用 NodeJS 通过 Watchfile 模块监视文件更改。 您可以使用 node 运行以下代码，但它仅控制台终端中更改的文件。 

    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
            });
          });
相关文章：