思想 ： 前台主动发起获取 =》 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. 图论初步2<蒟蒻专属，大佬勿喷>

    前言: 本节课讲的是图论的几种遍历方式,若没看图论初步1的赶紧去看 https://www.cnblogs.com/Craker/p/12271090.html 正文: 零.温故而知新 上节课我们学的 ...

  2. java递归调用 return的问题

    最近比较闲,写了个递归调用获取最大公约数,刚开始写错了,但一直不明白错在哪,错误代码如下: public class Demo { public static void main(String[] a ...

  3. Myeclipse 安装时候android adt, android sdk常见问题

    离线版adt安装  可以随意百度adt下载 安装时候注意断网模式,否则会连接到服务器耗费很长时间:如果安装报错,可能是adt与Myeclipse版本不匹配,如我用的是Myeclipse8.6,安装AD ...

  4. Windows Mysql Server重启, log-bin路径配置

    Windows Mysql Server重启, log-bin路径配置 分类: mysql数据库2014-03-16 14:49 1313人阅读 评论(0) 收藏 举报 Mysqlmysql serv ...

  5. NULL判斷符

    Null 传导运算符 编程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在.比如,要读取message.body.user.firstName,安全的写法是写成下面这样. const ...

  6. 在Ubuntu下如何压缩一个文件夹

    .gz 解压1:gunzip FileName.gz解压2:gzip -d FileName.gz 压缩:gzip FileName .tar.gz 解压:tar zxvf FileName.tar. ...

  7. IDEA配置Scala开发环境

    1.下载scala sdk 到页面 https://www.scala-lang.org/download/2.10.5.html 下载sdk,大数据平台目前的scala版本是2.10.5,下载后解压 ...

  8. Dubbo的配置过程，实现原理及架构详解

    一. Dubbo是什么?Dubbo能做什么? 随着互联网的发展,市场需求快速变更,业务持续高速增长,网站早已从单一应用架构演变为分布式服务架构及流动计算架构.在分布式架构的背景下,在本地调用非本进程内 ...

  9. DCGAN生成目标训练图片

    前言: GAN的原理很简单,但是它有很多变体,如:DCGAN.CycleGAN.DeblurGAN等,它们也被用在不同地方,本文将用到DCGAN来生成头像图片,可以做到以假乱真的地步. 1.首先调用程 ...

  10. 埃及分数问题 迭代加深搜索/IDA*

    输入整数a,b (0<a<b<500) ,输出最佳表达式 使得加数个数尽量小,如果加数个数相同,则最小的分数越大越好 ,输出表达式 考虑从小到大枚举深度上限maxd,每次执行只考虑深 ...