幻燈片文件夾

我需要開發一個網頁，將只在圖片的幻燈片文件夾幻燈片文件夾

下面在添加圖片是我的使用情況 -

我有一個文件夾我的PC包含一些圖像，我需要做這些圖像的幻燈片
我可以添加更多的圖像到這個文件夾動態。
現在讓我們說，對於第一個點的所有圖像的幻燈片的第一次迭代是完整的，並且在幻燈片的第一次出現期間在文件夾中添加了新圖像，然後對於第二次迭代，它應該首先顯示圖像動態添加，然後再次啓動所有圖像的幻燈片。

例如，如果我在一個文件夾中有10個圖像，並且這10個圖像的幻燈片顯示正在進行，那麼此文件夾中又增加了2個圖像，總圖像數爲12. 在這種情況下，滑塊應該完成10個圖像的幻燈片顯示，然後它應該顯示2個新增加的圖像。現在下一個應該顯示全部12個圖像。這個過程應該繼續。

我瞭解到javascpirt無法訪問文件系統，因此必須使用php/node js來讀取包含的文件夾。

我對網絡技術很陌生，任何幫助將不勝感激。謝謝

來源

2017-04-19 kumar

AJAX

您可以添加一個客戶端AJAX調用（JavaScript）的每分鐘（或其它值）誰問服務器（PHP）來獲取文件夾中的文件，並將其發送回客戶端（JavaScript的，json）。

的WebSocket

使用Node.js的socket.io包時更改文件夾您註冊一個事件誰用。它將被客戶端抓住，你可以觸發刷新你的圖像。

不錯的socket.io example here。這個計算器流程thread說明如何檢測（觀察）文件夾更改。

編輯：實施例與網頁套接字

服務器側的Node.js（未完成）

// 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); 
    } 
});

客戶端的JavaScript（聚合物2環境）

<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); 
});

來源

2017-04-19 14:18:12 Camille

幻燈片文件夾

回答

相關問題