Отримати список імен файлів у папці з Javascript

На моєму веб-сайті представлено багато фотографій із /assets/photos/папки. Як я можу отримати список файлів у цій папці за допомогою Javascript?

Поточний код дасть список усіх файлів у папці, припускаючи, що на стороні сервера ви хочете перерахувати всі файли:

var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');

Ні, Javascript не має доступу до файлової системи. Серверний Javascript - це зовсім інша історія, але, мабуть, ви не маєте на увазі цього.

Я пишу файл dir.php

var files = <?php $out = array();
foreach (glob('file/*.html') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['filename'];
}
echo json_encode($out); ?>;

У свій скрипт додайте:

<script src='dir.php'></script>

і використовуйте масив files []

Для файлів на стороні клієнта ви не можете отримати список файлів у локальному каталозі користувача.

Якщо користувач надав завантажені файли, ви можете отримати до них доступ через їх inputелемент.

<input type="file" name="client-file" id="get-files" multiple />


<script>
var inp = document.getElementById("get-files");
// Access and handle the files 

for (i = 0; i < inp.files.length; i++) {
    let file = inp.files[i];
    // do things with file
}
</script>

Для отримання списку імен файлів у вказаній папці ви можете використовувати:

fs.readdir(directory_path, callback_function)

Це поверне список, який ви можете проаналізувати шляхом простого індексування списку, наприклад file[0],file[1]тощо.

Я зробив різний маршрут для кожного файлу в певному каталозі. Тому перехід до цього шляху означав відкриття цього файлу.

function getroutes(list){
list.forEach(function(element) {
  app.get("/"+ element,  function(req, res) {
    res.sendFile(__dirname + "/public/extracted/" + element);
  });
});

Я зателефонував цій функції, передаючи список імен файлів у каталозі, __dirname/public/extractedі вона створила інший маршрут для кожного імені файлу, який я зміг зробити на стороні сервера.

Я використовую наступне (знятий код) у Firefox 69.0 (на Ubuntu), щоб прочитати каталог і показати зображення як частину цифрової фоторамки. Сторінка виконана у форматі HTML, CSS та JavaScript, і вона знаходиться на тій самій машині, де я запускаю браузер. Зображення також розташовані на тій самій машині, тому немає перегляду ззовні.

var directory = <path>;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', directory, false); // false for synchronous request
xmlHttp.send(null);
var ret = xmlHttp.responseText;
var fileList = ret.split('\n');
for (i = 0; i < fileList.length; i++) {
    var fileinfo = fileList[i].split(' ');
    if (fileinfo[0] == '201:') {
        document.write(fileinfo[1] + "<br>");
        document.write('<img src=\"' + directory + fileinfo[1] + '\"/>');
    }
}

Це вимагає security.fileuri.strict_origin_policyвідключення політики . Це означає, що це може бути не рішення, яке ви хочете використовувати. У моєму випадку я вважав це нормально.

Створіть php-файл під назвою 'files.php' із таким вмістом:

<?php 
$out = array();
foreach (glob('/assets/photos/*') as $filename) {
    $p = pathinfo($filename);
    $out[] = $p['basename'];
}
echo json_encode($out); 
?>

потім зателефонуйте йому за допомогою jQuery:

$.getJSON('files.php').then(function (response) {
     console.log(response);
});