思想 ： 前台主动发起获取 =》 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. struts2--通配符映射

    1.通配符映射: --规则: > 1)若找到多个匹配,没有通配符的优先: > 2)若指定动作不存在,struts2将会尝试把这个URI与任何一个包含着通配符*的动作名进行匹配: > ...

  2. 「CF1039D」You Are Given a Tree

    传送门 Luogu 解题思路 整体二分. 的确是很难看出来,但是你可以发现输出的答案都是一些可以被看作是关键字处于 \([1, n]\) 的询问,而答案的范围又很显然是 \([0, n]\),这不就刚 ...

  3. 小程序父子组件onLoad和Created之间的问题

    今天开发日历插件时,遇到了以下问题: 因为需要在父组件的onLoad里加载接口从而得到每一天的房间数据,然后将数据存进小程序缓存. 接着在子组件里 获取小程序缓存来得到父组件传来的房间数据,在子组件里 ...

  4. 命令行添加删除tomcat服务

    在进行项目布署的时候,有时候我们需要重新添加或者卸载tomcat服务,这里,我们可以在命令提示符下进行操作,步骤如下:1.开始—运行,敲入cmd,回车打开命令提示符.2.进行tomcat所在盘符,如d ...

  5. Matplotlib 饼图

    章节 Matplotlib 安装 Matplotlib 入门 Matplotlib 基本概念 Matplotlib 图形绘制 Matplotlib 多个图形 Matplotlib 其他类型图形 Mat ...

  6. Centos7 静默安装 Oracle11G

    1.准备安装包: 安装包官网下载地址:https://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-l ...

  7. jenkins -- 安装、任务构建

    一.jenkins是什么? Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行( ...

  8. Rancher概述

    概述 What’s Rancher? Rancher是一套容器管理平台,它可以帮助组织在生产环境中轻松快捷的部署和管理容器. Rancher可以轻松地管理各种环境的Kubernetes,满足IT需求并 ...

  9. yum出现Error downloading packages错误

    yum出现Error downloading packages错误错误表现方式:yum可以list,可以clean cache,但是无法安装,错误提示: Downloading packages: E ...

  10. 关于netty配置的理解serverBootstrap.option和serverBootstrap.childOption

    The parameters that we set using ServerBootStrap.option apply to the ChannelConfig of a newly create ...