思想 ： 前台主动发起获取 =》 ajax

1，前台文件 index.html

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　<title>Document</title>
　　<style>
　　　　body{
　　　　　　background: skyblue;
　　　　　　padding: 50px;
　　　　}
　　</style>
</head>
 
<body>
 
<h1>获取文件夹</h1>
<div id="div"></div>
<script>
　　var xhr = new XMLHttpRequest();
　　xhr.open('get','/file_list');
　　xhr.send();
　　xhr.onreadystatechange = function(){
　　　　if(xhr.readyState == 4){
　　　　/*
　　　　* 　 json 转 数组
　　　　*/
　　　　var data = JSON.parse(xhr.responseText);
　　　　var htmls = '';
　　　　
　　　　for(var i=0;i<data.length;i++){
　　　　　　htmls += data[i]+' '
　　　　}
　　　　document.getElementById('div').innerHTML = htmls;
　　　　}
　　}
</script>
</body>
</html>
 
________________________________________________________
 
2，后端文件  server.js
 
const http = require('http');
const fs = require('fs');
const server = http.createServer();
server.on('request', function (req, res) {
　　// 根据每次请求的文件类型给予相应的响应
　　var urls = req.url;
　　console.log(urls);
　　if(urls=='/'){
　　　　res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
　　　　fs.readFile('./index.html', 'utf-8', function (err, data) {
　　　　　　if (err) console.log(err)
　　　　　　res.end(data)
　　　　});
　　}else if(urls == '/file_list'){
　　　　fs.readdir('./','utf8',(err,data)=>{
　　　　　　/**
　　　　　　* 客户端与服务端进行数据通信时 ， 将数据转化为 json 格式
　　　　　　*/
　　　　　　res.end(JSON.stringify(data))
　　　　})
　　}else{
　　　　// 自动为二进制，浏览器会自动识别
　　　　// 注意路径前要加 .
　　　　fs.readFile('.'+urls, function (err, data) {
　　　　　　if (err) console.log(err)
　　　　　　res.end(data)
　　　　});
　　}
 
});
server.listen(1234, () => {
　　console.log('this server is runing on 1234')
});

10 —— node —— 获取文件在前台遍历的更多相关文章

  1. python3获取文件及文件夹大小

    获取文件大小 os.path.getsize(file_path):file_path为文件路径 >>> import os >>> os.path.getsize ...

  2. 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图

    [源码下载] 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获 ...

  3. 背水一战 Windows 10 (86) - 文件系统: 获取文件夹的属性, 获取文件夹的缩略图

    [源码下载] 背水一战 Windows 10 (86) - 文件系统: 获取文件夹的属性, 获取文件夹的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获取文件夹的属性 ...

  4. 背水一战 Windows 10 (85) - 文件系统: 获取文件夹和文件, 分组文件夹, 排序过滤文件夹和文件, 搜索文件

    [源码下载] 背水一战 Windows 10 (85) - 文件系统: 获取文件夹和文件, 分组文件夹, 排序过滤文件夹和文件, 搜索文件 作者:webabcd 介绍背水一战 Windows 10 之 ...

  5. HDFS 读取、写入、遍历文件夹获取文件全路径、append

    版权声明:本文为博主原创文章,未经博主同意不得转载.安金龙 的博客. https://blog.csdn.net/smile0198/article/details/37573081 1.从HDFS中 ...

  6. Node.js：上传文件，服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  7. python文件夹遍历,文件操作,获取文件修改创建时间

    在Python中,文件操作主要来自os模块,主要方法如下: os.listdir(dirname):列出dirname下的目录和文件os.getcwd():获得当前工作目录os.curdir:返回当前 ...

  8. node 的fs.state 获取文件信息

    1. fs.stat()可以获取文件的信息,用法如下: const fs = require('fs'); fs.stat('./book.js',(err,stats)=>{ if(err) ...

  9. Windows Store App JavaScript 开发：获取文件和文件夹列表

    在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...

随机推荐

  1. vue的高级使用技巧

    全局组件注册 一般组件应用弊端,比较笨拙繁琐低效,比如我们写了一些组件,需要引用上的时候就通过import导入,那如果是高频繁需要使用的组件,则需要在每个使用的时候都需要引入并注册 假设现在有两个组件

  2. Golang gin开源实例——接口

    Github地址 https://github.com/EDDYCJY/go-gin-example 返回值 字段:code.msg.data 举例 # 失败 { , "msg": ...

  3. 「NOIP2007」树网的核

    传送门 Luogu 解题思路 这里着重介绍 \(O(n^3)\) 的做法,毕竟考场上只有 \(N\le300\) \(Q \omega Q\) 首先我们要知道,对任意一条直径算偏心距都是一样的. 证明 ...

  4. [7b2美化]柒比贰 魔改系列|7B2-分类封面添加波浪效果&每日诗词

    本文转载自:钻芒博客 https://www.zmki.cn/5105.html 效果如图: 代码: 首先在style.css样式表里添加波浪样式 /*浪来了*/ .lang { overflow: ...

  5. Python运行目录或压缩文件

    如果你在你的工程文件根目录下放一个__main__.py文件,你就可以使用根目录运行整个程序. 你的工程像这样 ex. app/ |-test.py |-test2.py |-__main__.py ...

  6. 玩玩负载均衡---在window与linux下配置nginx

      最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx, ...

  7. JdbcTemplate常用方法

    JdbcTemplate简介 JdbcTemplate是Spring JDBC的核心类,借助该类提供的方法可以很方便的实现数据的增删改查. Spring对数据库的操作在jdbc上面做了深层次的封装,使 ...

  8. Html5 -- 语义标签兼容性处理

    方法一:通过js处理 方法二:完美的处理方式 no.1 !--[if lte IE 8]> <script type="text/javascript" src=&qu ...

  9. 08 SSM整合案例（企业权限管理系统）：07.订单操作

    04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.用户操作 09.权限控制 10.权限关联与控制 11.AOP日志 07.订单操作 SSM订单操作 ...

  10. 非极大抑制睔PYTHON实现

    非极大抑制(Non-maximum suppression)python代码实现原创Butertfly 发布于2018-11-20 18:48:57 阅读数 293 收藏展开定位一个物体,最后算法就找 ...