Javascript 在文件夹中动态添加图像的幻灯片放映

我需要开发一个网页，将只做一个文件夹中的图像幻灯片

下面是我的用例-

我的电脑里有一个文件夹，里面有一些图片，我需要用幻灯片放映这些图片

我可以动态地将更多图像添加到此文件夹

现在，假设第1点中所有图像的第一次幻灯片放映已完成，并且在第一次幻灯片放映期间文件夹中添加了新图像，那么第二次迭代应首先显示动态添加的图像，然后再次开始所有图像的幻灯片放映

例如，如果我在一个文件夹中有10个图像，并且这10个图像的幻灯片正在进行中，那么现在在该文件夹中又添加了2个图像，并且图像总数为12。 在这种情况下，滑块应该完成10个图像的幻灯片放映，然后它应该显示2个新添加的图像。现在在下一次迭代中，它应该显示所有12幅图像。这一进程应该继续下去

我了解到JavaScript无法访问文件系统，所以必须使用php/node js读取文件夹的内容

我对网络技术非常陌生，任何帮助都将不胜感激。多谢各位

阿贾克斯

您可以每分钟（或其他值）添加一个客户端ajax调用（javascript），请求服务器（PHP）获取文件夹文件并将其发送回客户端（javascript、json）

网袋

当文件夹更改时，使用Node.js socket.io包注册事件。它将被客户端捕获，您可以触发图像刷新

漂亮的socket.io。本节介绍如何检测（监视）文件夹更改

编辑：使用Websocket的示例

服务器端Node.js（未完成）

客户端javascript（聚合2环境）

...
//侦听文件夹更改
var socketIO=io.connect（）；
//Fire server Socket.io事件“订阅文件夹更改”
emit（'subscribe folder change'）；
//注册到服务器Socket.io事件“文件夹更改”（签入演示服务器/app.js）
socketIO.on（'folder changed'，函数（folderFiles）{
var files=JSON.parse（folderFiles）；
log（'文件夹转换器，文件夹中的文件'，文件）；
});

// Main app
var express = require('express');
var app = express();
...
// Main http server listen
var http = require('http').Server(app);
...
// Websocket
var io = require('socket.io')(http);
// FileSystem (? better to use chokidar ?)
var fs = require('fs');

// On client connection, subscribe to event
io.on('connection', function(socket){
    // Register a socket.io server event 'subscribe'
    socket.on('subscribe folder change', function() {
        socket.username = 'test_user';
        socket.room = 'folder-change';
        socket.join('folder-change');        
        console.log('subscribe folder change event');
    });
}); 

var fsTimeout;
// Watch folder
fs.watch('folderToScan',  function (event) {
    if (!fsTimeout) {
        // Read folder
        fs.readdir('folderToScan', function(err, files){
            if (err) throw err;
            console.log('emit event folder change', files);
            // Emit a socket.io folder changed ('folder-change' = room)
            io.sockets.in('folder-change').emit('folder changed', JSON.stringify(files));        
        });
        // Give 3 seconds for multiple events
        fsTimeout = setTimeout(function() { fsTimeout = null; }, 3000);
    }
});

<script src="path/to/node_modules/socket.io-client/dist/socket.io.js" type="text/javascript"></script>

...

// Listen for folder change
var socketIO = io.connect();
// Fire server Socket.io event 'subscribe folder change'
socketIO.emit('subscribe folder change');
// Register to server Socket.io event 'folder change' (check in demo-server/app.js)
socketIO.on('folder changed', function(folderFiles){
    var files = JSON.parse(folderFiles);
    console.log('Folder changer, files in folder', files);
});