Получить список имен файлов в папке с Javascript

86

На моем веб-сайте много изображений из /assets/photos/папки. Как я могу получить список файлов в этой папке с помощью Javascript?

javascript

— Bevanb
источник

5

Что пробовали? И в каком контексте вы хотите получить список файлов ... Из браузера или с сервера с node.js?

— Дэвид Баркер

И какой браузер вы поддерживаете?

— Simpal Kumar 07

@Mike, это только для последней версии Chrome

— bevanb 07

@Mike Я сомневаюсь, что выбор браузера действительно имеет значение. Браузер не имеет доступа к списку файлов, пока сервер не предоставит его.

— Майк Клак, 07

@MikeC да, ты прав. Я думал об IE ActiveXObjectдля доступа к файловой системе клиентской системы. Я спросил.

— Simpal Kumar 07

90

Текущий код даст список всех файлов в папке, предполагая, что на стороне сервера вы хотите перечислить все файлы:

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

— Кристоффер Карлссон
источник

11

Я имел в виду доступ к списку файлов от клиента, извините, не было более ясным.

— bevanb 07

8

Откуда берется require () или определяется ??? Ваш код вызывает ошибку «Требование не определено». Вы тестировали свой код? Если да, то, возможно, вы пропустили какую-то важную часть, касающуюся «требуется»?

— Апостолос

5

@Apostolos Как отмечает OP в описании, это должен быть серверный код. Вы не можете запустить это в браузере. Запуск этого скрипта с Node.js не вызывает ошибок.

— Naltroc

2

Это хороший способ, но, похоже, не дает прямого ответа на вопрос. Простой ответ - нет, в JS со стороны клиента (браузера) нет прямого способа получить список файлов в папке / каталоге на стороне сервера.

— Акшай Хайремат

require () поддерживается только с nodejs

— Дульмина

35

Нет, Javascript не имеет доступа к файловой системе. Серверный Javascript - это совсем другая история, но я думаю, вы не это имеете в виду.

— Симпал Кумар
источник

11

Это уже не так. Файловый API - это вещь.

— superluminary

1

@superluminary, как тогда можно сделать это с помощью этого API?

— 2540625

@jtheletter API работает на сервере, поэтому вы должны использовать любой стек, который работает на вашем сервере. Если это Node, это будет fs.readdir.

— superluminary

1

Если вы говорите, что необходимо использовать библиотеку, это не совсем то же самое, что сказать, что JavaScript (ванильный) имеет доступ к файловой системе.

— 2540625

13

Пишу файл 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 []

— IfThenElse
источник

как вы вызываете / используете файлы [] var с javascript?

— Leths

1

Uncaught SyntaxError: Неожиданный токен '<'

— 2540625

1

@ 2540625, то есть php, а не чистый javascript. Несмотря на то, что вам нужен php, и он не решает проблему автора, это все равно довольно хорошее решение, если у вас есть php.

— windowsboy111

В качестве альтернативы, если вы хотите перечислить все файлы, используйте *.*или используйте scandir для сохранения расширений файлов,$out = scandir("."); echo json_encode($out);

— Stardust

Это не javascript

— scitronboy

10

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

Если пользователь предоставил загруженные файлы, вы можете получить к ним доступ через их 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>

— Naltroc
источник

4

Для получения списка имен файлов в указанной папке вы можете использовать:

fs.readdir(directory_path, callback_function)

Это вернет список, который вы можете проанализировать с помощью простой индексации списка, например file[0],file[1], и т. Д.

— Ахмад Зафар
источник

2

Я сделал свой маршрут для каждого файла в определенном каталоге. Следовательно, переход по этому пути означал открытие этого файла.

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

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

— Tanmay_Gupta
источник

1

Я использую следующий (урезанный код) в 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необходимо отключить политику . Это означает, что это может быть не то решение, которое вы хотите использовать. В моем случае я счел это нормально.

— Питервандерстар
источник