javascript - 观察打开文件中的文件更改

标签 javascript html

<分区>

有没有办法在浏览器中监视文件更改?

工作流程是:

1) 用户打开文件

2) webapp写入文件

3) 本地安装的应用程序读取文件并写入一些更改

4) webapp 读取最后的变化

5) 最终再次进入第2步

这应该在浏览器中完成。

目前我有一个按钮,用户必须多次按下,但是:

1) 我更希望它自动完成,无需点击 2) Chrome 缓存文件,因此不会读取进一步的更改。

执行此操作的最佳方法是什么?

这是我现在正在做的:

https://codepen.io/muaddibber/pen/OZJgYQ

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            fileDisplayArea.innerText = "File not supported!"
        }
    });
}

我打开一个文件 prova.txt,它可以运行。

然后我在本地编辑文件并重新打开它:它没有改变,chrome 仍然显示旧版本。

最佳答案

出于安全原因,浏览器无法监控文件系统以了解对本地文件的更改。

通常,当您使用网页或网络应用程序选择文件时,它要么立即上传到服务器,要么在按下“提交”或“上传”按钮后导致表单提交。之后,工作就完成了。如果您希望 Web 应用程序看到文件的任何后续更改,则必须再次手动上传,因为无法监视更改或自动再次上传。是的,这很痛苦,但如果不这样做,它可能会被恶意网络脚本利用来窃取用户数据。

即使使用浏览器插件处理此类内容也变得越来越困难,因为 WebExtensions(由 Chrome 和 Firefox 使用)通常不允许访问文件系统。这就是为什么大多数插件,如 Stylish、Stylus、Greasemonkey、Tampermonkey 等,现在都有自己的内置编辑器,并将其"file"保存到 HTML5 LocalStorage 作为解决方法。如果您想要持续更新,您可能还必须为您的网络应用实现“实时”编辑器。

关于javascript - 观察打开文件中的文件更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49898757/

相关文章:

javascript - ng-repeat 在 Bootstrap 模式中不起作用

html - 需要将父文档的 css 获取到 iframe

javascript - Shadertoy 的音频着色器如何工作?

javascript - 如何将 .jsx 文件中的绝对路径更改为相对路径。 (Photoshop 扩展脚本)?

javascript - Chrome 应用程序执行脚本与 setTimeout,回调不等待

php - 执行 $_SERVER ['PHP_SELF' ] 而不删除我的 $_GET 变量

javascript - 如何使用图像的特定索引打开 fancybox

javascript - 如何创建包含异步调用的 Javascript (es5) 构造函数

javascript - jquery在android中点击滚动到div的顶部

html - 创建一个像 facebook 一样的 div 聊天