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

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