思想 ： 前台主动发起获取 =》 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. 嵊州普及Day3T2

    题意:对于n数列的全排列,有多少种可能,是每项前缀和不能整除3.输出可能性%1000000000037. 思路:全部模三,剩余1.2.0,1.2可这样排:1.1.2.1.2.1.2.……2或2.2.1 ...

  2. ls查看所有文件

    ls -al   查看所有文件,包括隐藏文件

  3. java 搭积木

    搭积木 小明最近喜欢搭数字积木, 一共有10块积木,每个积木上有一个数字,0~9. 搭积木规则: 每个积木放到其它两个积木的上面,并且一定比下面的两个积木数字小. 最后搭成4层的金字塔形,必须用完所有 ...

  4. shiro缓存配置

    realm的缓存 方法一: 在securityManager配置中添加cacheManager配置项,会注入到realm中. 方法二:在realm中配置. realm本身实现了CacheManager ...

  5. 关于C++中vector<vector<int> >的使用

    1.定义 vector<vector<int>> A;//错误的定义方式 vector<vector<int> > A;//正确的定义方式 2.插入元素 ...

  6. 安卓：从assets目录下复制文件到指定目录

    有些时候我们直接将某些资源文件内置到apk中,便于直接使用. 1.首先将文件放置在项目/app/src/main/assets目录中 2.功能代码: public void copyFile(Stri ...

  7. C++面试常见问题——12虚函数

    虚函数 虚函数的工作原理 虚函数的实现要求对象携带额外的信息,这些信息用于确定运行时调用哪一个虚函数,这一信息具有一种被称为虚函数表指针(vptr)的指针形式.vptr指向一个被称为虚函数表(vtbl ...

  8. Koa原理和封装

    相关文章 最基础 实现一个简单的koa2框架 实现一个简版koa koa实践及其手撸 Koa源码只有4个js文件 application.js:简单封装http.createServer()并整合co ...

  9. 066、Java面向对象之以分步的方式实例化对象

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...

  10. 云服务器：西部数码VS阿里云

    公司因为业务的需要,申请了两个云服务器.一个是西部数码的,一个是阿里云香港的.其中西部数码的配置高一些,一年4500元左右:香港的则便宜些,一年2200左右.因为备案问题,主业务放在成都的西部数码服务 ...