Pobierz listę nazw plików w folderze z Javascriptem

87

Moja witryna obsługuje wiele zdjęć z /assets/photos/folderu. Jak uzyskać listę plików w tym folderze za pomocą JavaScript?

javascript

— bevanb
źródło

5

Czego próbowałeś? A w jakim kontekście chcesz pobrać listę plików ... Z przeglądarki lub z serwera z node.js?

— David Barker,

Które przeglądarki obsługujesz?

— Simpal Kumar,

@Mike, to dotyczy tylko najnowszej wersji Chrome

— bevanb,

@Mike Wątpię, czy wybór przeglądarki ma znaczenie. Przeglądarka nie ma dostępu do listy plików, chyba że serwer go przedstawi.

— Mike Cluck

@MikeC ya masz rację. Myślałem o IE, ActiveXObjectaby uzyskać dostęp do systemu plików klienta. Więc zapytałem.

— Simpal Kumar

90

Bieżący kod poda listę wszystkich plików w folderze, zakładając, że znajduje się on po stronie serwera, na którym chcesz wyświetlić wszystkie pliki:

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

— Christoffer Karlsson
źródło

11

Miałem na myśli dostęp do listy plików od klienta, przepraszam nie było bardziej jasne.

— bevanb

8

Skąd pochodzi lub jest zdefiniowany require ()? Twój kod wywołuje błąd „Wymaganie nie jest zdefiniowane”. Czy przetestowałeś swój kod? Jeśli tak, czy może przegapiłeś jakąś ważną część dotyczącą „wymagania”?

— Apostolos

5

@Apostolos Jak zauważa OP w opisie, musi to być kod po stronie serwera. Nie możesz tego uruchomić w przeglądarce. Uruchomienie tego skryptu z Node.js nie powoduje żadnych błędów.

— Naltroc

2

To dobry sposób, ale wydaje się, że nie odpowiada bezpośrednio na pytanie. Prosta odpowiedź brzmi: nie, w JS po stronie klienta (przeglądarki) nie ma bezpośredniego sposobu na pobranie listy plików w folderze / katalogu po stronie serwera.

— Akshay Hiremath

require () jest obsługiwana tylko z nodejs

— Dulmina

35

Nie, Javascript nie ma dostępu do systemu plików. Javascript po stronie serwera to zupełnie inna historia, ale myślę, że nie masz tego na myśli.

— Simpal Kumar
źródło

11

To już nie jest prawdą. File API to rzecz.

— superluminium

1

@ superluminary, jak w takim razie można to zrobić przy użyciu tego API?

— 2540625

@jtheletter Interfejs API działa na serwerze, więc możesz użyć dowolnego stosu, który masz na serwerze. Jeśli to Node, będzie to fs.readdir.

— superluminary

1

Jeśli mówisz, że biblioteka musi być używana, to nie to samo, co stwierdzenie, że JavaScript (wanilia) ma dostęp do systemu plików.

— 2540625

13

Piszę plik dir.php

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

W swoim skrypcie dodaj:

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

i użyj tablicy files []

— IfThenElse
źródło

jak wywołać / użyć plików [] var z javascriptem?

— Leths

1

Uncaught SyntaxError: Nieoczekiwany token '<'

— 2540625 Kwietnia

1

@ 2540625, czyli php, a nie czysty javascript. Mimo, że potrzebujesz php i nie rozwiązuje to problemu autora, nadal jest całkiem dobrym rozwiązaniem, jeśli masz php.

— windowsboy111,

Alternatywnie, jeśli chcesz wyświetlić listę wszystkich plików, użyj *.*lub użyj scandir, aby zachować rozszerzenia plików,$out = scandir("."); echo json_encode($out);

— Stardust

To nie jest javascript

— scitronboy

10

W przypadku plików po stronie klienta nie można uzyskać listy plików w lokalnym katalogu użytkownika.

Jeśli użytkownik dostarczył przesłane pliki, możesz uzyskać do nich dostęp za pośrednictwem ich inputelementu.

<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
źródło

4

Aby uzyskać listę nazw plików w określonym folderze, możesz użyć:

fs.readdir(directory_path, callback_function)

Spowoduje to zwrócenie listy, którą możesz przeanalizować przez proste indeksowanie list, takie jak file[0],file[1]itp.

— Ahmad Zafar
źródło

2

Zrobiłem inną trasę dla każdego pliku w określonym katalogu. Dlatego przejście do tej ścieżki oznaczało otwarcie tego pliku.

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

Nazwałem tę funkcję, przekazując listę nazw plików w katalogu __dirname/public/extractedi utworzyła inną trasę dla każdej nazwy pliku, którą byłem w stanie wyświetlić po stronie serwera.

— Tanmay_Gupta
źródło

1

Używam następującego (uproszczonego kodu) w przeglądarce Firefox 69.0 (na Ubuntu), aby odczytać katalog i wyświetlić obraz jako część cyfrowej ramki na zdjęcia. Strona jest napisana w formacie HTML, CSS i JavaScript i znajduje się na tym samym komputerze, na którym uruchamiam przeglądarkę. Obrazy również znajdują się na tej samej maszynie, więc nie ma możliwości oglądania ich „z zewnątrz”.

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] + '\"/>');
    }
}

Wymaga to wyłączenia zasad security.fileuri.strict_origin_policy. Oznacza to, że może to nie być rozwiązanie, którego chcesz użyć. W moim przypadku uznałem to za w porządku.

— pietervanderstar
źródło