HTML JS 自动读取数据

如何用JS自动 按时间顺序 读取192.168.1.30这个IP地址下的anv文件下的所有TXT文件
并且显示在HTML中
显示2023-1-12内容的时候前面的2023-1-11的内容也要显示出来

img

计时器定时请求服务器获取数据接口,示例代码如下


var http = require("http");
let fs = require("fs");



function getContent() {
    let folder = 'F:\\nodejs\\readtext\\text\\';//text文件所在路径
    var allcontent = fs.readdirSync(folder)//获取文件夹中的text文件
        .sort((a, b) => {//文件按照修改时间降序降序排列
            return fs.statSync(folder + b).mtime - fs.statSync(folder + a).mtime;
        }).map(i => {//读取text文件内容
            var fullpath = folder + i;
            var lines = fs.readFileSync(fullpath, 'utf-8').split('\n');//读取文件后回车拆分成数据行,如果text存储编码不是utf-8,而是ansi,注意改为gb2312编码读取
            lines.reverse();//将数据行反向,就是最下面的调整到最前面

            return lines.join('<br>');//重新将textn内容合成字符串
        }).join('<br/>');
    return allcontent;
}


var server = http.createServer(function (req, res) {
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    if (req.url == '/getdata') {//计时器发送的请求
        var content = getContent();
        res.write(content)
    }
    else {
        res.write(`<!doctype html>
<meta charset='utf-8'/>
<div id="div1"></div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
function loadData() {
    $.ajax({
        url: '/getdata',
        dataType: 'html',
        success: function (s) {
            $('#div1').html(s)
        }
    })
}
loadData();//第一次访问
setInterval(loadData, 1000);//1s更新一次,其他时间改1000这个参数,单位为ms
</script>
`);
    }
    res.end();
});
var port = 3000;
var hostName = '127.0.0.1';
server.listen(port, function () {
    console.log(`服务器运行在http://${hostName}:${port}`);
});


浏览器不能读取本地的文件,要依赖nodejs的fs文件系统模块

js做不到,你可能需要一个后端比如node,java,php,python啥的

提供参考实例【详解Js中文件读取机制】,链接:https://www.cnblogs.com/zhu-xingyu/p/5638915.html

望采纳!!!点击回答右侧采纳即可!!

要想使用JavaScript读取远程文件,可以使用XMLHttpRequest或者fetch API来访问远程文件。

下面是使用XMLHttpRequest读取文件的例子:

function readRemoteFile(filepath) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", filepath, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 将读取的文件内容显示在HTML中
            document.getElementById("content").innerHTML = xhr.responseText;
        }
    }
    xhr.send();
}

// 例如读取192.168.1.30的anv文件夹下的2023-1-12的文件
var filepath = "http://192.168.1.30/anv/2023-1-12.txt";
readRemoteFile(filepath);


可以参考这篇文章试一下
https://blog.csdn.net/qq449245884/article/details/106233209/

之前写了个类似的,仅供参考:
若有帮助,还望采纳,点击回答右侧采纳即可。

var fs = require('fs');
var join = require('path').join;

function getJsonFiles(jsonPath){
    let jsonFiles = [];
    function findJsonFile(path){
        let files = fs.readdirSync(path);
        files.forEach(function (item, index) {
            let fPath = join(path,item);
            let stat = fs.statSync(fPath);
            if(stat.isDirectory() === true) {
                findJsonFile(fPath);
            }
            if (stat.isFile() === true) { 
              jsonFiles.push(fPath);
            }
        });
    }
    findJsonFile(jsonPath);
    console.log(jsonFiles);
}

getJsonFiles("test");

  1. 单独使用js 在浏览器中不能完成,可以nodejs 写个后台读取文件返回到前端。
  2. 需要一个后端服务按照顺序读取本地文件,然后读取文件内容返回。
  3. 前端调用接口访问文件内容并展示。