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を無効にする必要があります。これは、使用したいソリューションではない可能性があることを意味します。私の場合、大丈夫だと思いました。

次の内容で「files.php」という名前の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);
});