个人中心
gpt4 book ai didi

javascript - 在前端 HTML 文件中显示 fs.readdirSync() 的输出

转载 作者：太空宇宙 更新时间：2023-11-04 03:20:47 25 4
gpt4 key购买 nike

我对 node.js 很陌生并一直在谷歌上搜索我上面问题标题中所述问题的解决方案。

基本上，我正在构建一个简单的 Web API，允许用户上传文件，然后单独查询它们。因此，我试图弄清楚如何显示服务器目录中的文件列表，这样他们就可以从列表中选择它，而不是记住确切的文件名。

这是我的完整 html 代码 project/public/index.html (编辑 - Oorja 回答后)

<!DOCTYPE html>
<html>
    <head>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    </head>

    <style>
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f6f6f6;
            min-width: 230px;
            overflow: auto;
            border: 1px solid #ddd;
            z-index: 1;
        }
        .show {display:block;}
    </style>

    <body>
        <h1>api service</h1>
        <br>
        <div id="upload_form">
            <h3>Upload images</h3>
            <form action="/api/uploadImages" method="post" enctype="multipart/form-data"> 
                <input type="file" name="image" multiple="multiple"><br><br>
                <input type="submit" value="Upload">
            </form>
        </div>

        <div id="query_images">
            <h3>Query images</h3>
            <form action="/api/queryImages" method="get" enctype="text/plain">
                <input type="text" name="image_name"><br><br>
                <input type="submit" value="Query">
            </form>
        </div>

        <div class="dropdown">
            <button onclick="show_list()" class="dropbtn">Images</button>
            <div id="image_list" class="dropdown-content">
                <input type="text" placeholder="Search for your images..." id="userInput">
            </div>
        </div>

        <script>
            function show_list() {
                var image_list = document.getElementById("image_list");
                $.getJSON('http://localhost:8080/list-files', function(data) {
                    data.forEach(function(file) {
                        $(image_list).append($('<a href="http://localhost:8080/uploaded_files/' + file + '">' + file + '</a>'));
                    })
                });
            }
        </script>
    </body>
</html>

下面是 javascript 完整代码 project/server.js (编辑 - Oorja 回答后)

var express = require('express'),
    multer = require('multer'),
    bodyParser = require('body-parser'),
    path = require('path')
    fs = require('fs');

var app = express();

var imageStorage = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, './uploaded_files');
    },

    filename: function(req, file, callback) {
        callback(null, file.fieldname + '_' + Date.now() + '_' + file.originalname);
    }
});

var upload = multer({
    storage: imageStorage,
    fileFilter: function(req, file, callback) {
        console.log('Checking file extension...');
        var extension = path.extname(file.originalname);
        if (extension == '.jpg' || extension == '.png' || extension == '.jpeg') {
            console.log('Extension looks good!');
            callback(null, true);
        } else {
            callback('Please upload images only!', false);
        }
    }
}).array('image');

app.use(bodyParser.json());
app.use('/uploaded_files', express.static('./upload_files'));

// define http methods handlers
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'))
});

app.get('/list-files', function(req, res) {
    var files = fs.readdirSync('./uploaded_files');
    res.json(files);
})

app.get('/api/queryImages', function(req, res) {
    var imageName = req.query.image_name
    console.log(imageName);
    res.sendFile(path.join(__dirname, 'uploaded_files', imageName));
});

app.post('/api/uploadImages', function(req, res) {
    upload(req, res, function(err) {
        if (err) {
            console.log(err);
            return res.end('Something went wrong!');
        }
        console.log('Upload successful!')
        res.send('Successfully uploaded images!');
    });
});

app.listen(port=8080, function(a) {
    console.log('Listening to port ' + port);
});

JavaScript 有效 /list-files因为我可以在控制台中看到文件列表，或者如果我转到 /list-files url，但是，我无法弄清楚如何将输出发送到前端 - 我不知道如何连接它们 - 所以当我单击 button 时下div class="dropdown"它们将显示为列表 <a>元素。

有人可以给我指出正确的方向吗？或者更好，给我一个例子？

提前谢谢您!

编辑files的输出来自上面的 javascript /list-files如下

[ '.DS_Store',
  'Screen Shot 2018-06-02 at 2.15.10 pm.png',
  'aaa.png',
  'bbb.png',
  'ccc.png',
  'ddd.png',
  'eee.png' ]

此外，为了澄清，我正在使用 Express构建此 Web api 的框架。

最佳答案

准备好文件列表后，为其创建一个 API 端点。比如说，/get-files。假设您使用 express 作为 Node.js 服务器，您可以执行此操作 -

const express = require('express');
const fs = require('fs');

const app = express();
// Makes your upload_files directory public. Don't use this in a real app. 
// Create a separate route to serve file data. This is just for brevity of code.
app.use('/upload_files', express.static('./upload_files'))

app.get('/get-files', (req, res) => {
    // your logic of getting file names
    const files = fs.readdirSync('./upload_files');
    res.json(files);
});

app.listen(3000); // start a server at localhost:3000

现在，在前端，您可以打开 XHR GET 请求来获取 Node.js 服务器上的文件名称，如下所示 -

function show_list() {
    var image_list= document.getElementById('image_list');
    // Assuming you have jQuery as well...
    $.getJSON('http://localhost:3000/get-files', function (data) {
        data.forEach(file => {
            // Do something with the file name 
            $(image_list).append($('<a href="http://localhost:3000/upload_files/' + file + '">' + file  + '</a>'));
        })
    });
}

您可以阅读有关 Express 的更多信息 here 。您还可以执行 Tamas 使用服务器端模板所做的事情。它将与 HTML 文件一起发送数据，但我怀疑这是否是您所要求的。

关于javascript - 在前端 HTML 文件中显示 fs.readdirSync() 的输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50663961/

25 4 0
文章推荐： node.js - Firebase Cloud Functions - 在 Firestore 中移动数据
文章推荐： C试图将指针复制到新指针
文章推荐： php - 将 div 彼此对齐
文章推荐： java - Android JNI GetMethodID() 失败
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com