思想 ： 前台主动发起获取 =》 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. JDBC--DAO设计模式

    1.DAO(Data Access Object):访问数据信息的类,包含对数据的CRUD(Create.Read.Update.Delete),而不包含任何业务相关的信息. --DAO能够实现功能的 ...

  2. [易语言][ExDui][Tutorial]0.Hello,world!

    原创博客,请勿在未经授权的情况下转载. At the Beginning... 由于近期爱好摸鱼,并且对Gui开发萌生一丝兴趣.在尝试WPF被虐,使用Qt却不太喜欢整套庞大的框架后-- I choos ...

  3. 「NOI2009」二叉查找树

    传送门 Luogu 解题思路 看一眼题面,显然这是一颗 treap ,考虑到这棵 treap 的中序遍历总是不变的,所以我们就先把所有点按照数据值排序,求出 treap 的中序遍历,然后还可以观察到, ...

  4. Derivative Pricing_2_Vasicek

    *Catalog 1. Plotting Vasicek Trajectories 2. CKLS Method for Parameter Estimation (elaborated by GMM ...

  5. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法（合集）

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

  6. Unity3d fbx纹理不显示 原因

    Unity3d 导入fbx文件后纹理不显示(3ds Max中显示正常) 原因: 1.纹理图片没有导入fbx同一文件夹中 2.纹理图片没有在fbx文件之前导入(现导入纹理图片,再导入fbx文件)

  7. Redis列表类型

    列表类型(list) 可以存储一个有序的字符串列表.常用的操作是向列表两端添加元素. 一个列表类型键最多能容纳2^32 -1个元素. 命令 向列表两端增加元素 LPUSH key value [val ...

  8. Hibernate all-delete-orphan[转]

    博客分类: SSH   当关联双方存在父子关系,就可以在 set 处设定 cascade 为 all-delete-orphan 所谓父子关系,即指由父方控制子方的持久化圣明周期,子方对象必须和一个父 ...

  9. LR_问题_平均响应时间解释，summary与analysis不一致----Summary Report中的时间说明

    Summary是按整个场景的时间来做平均的,最大最小值,也是从整个场景中取出来的. (1)       平均响应时间:事物全部响应时间做平均计算 (2)       90%响应时间:将事物全部响应时间 ...

  10. 设备树DTS 学习：3-常用的DTS 函数

    Linux内核中目前DTS相关的函数都是以of_前缀开头的,它们的实现位于内核源码的drivers/of下面 void __iomem*of_iomap(struct device_node *nod ...