フォルダのコンテンツを表示するHTMLページの作成方法

2024-02-08 03:18 HTML フォルダ コンテンツ表示

フォルダのコンテンツを表示するためのHTMLページを作成する方法について説明します。以下の手順に従ってください。

  1. HTMLの基本構造を作成します。以下のコードを使用して、HTMLページの枠組みを作成します。
<!DOCTYPE html>
<html>
<head>
  <title>フォルダのコンテンツ表示</title>
</head>
<body>
  <h1>フォルダのコンテンツ</h1>
  <ul id="fileList"></ul>
</body>
</html>
  1. JavaScriptを使用して、フォルダのコンテンツを取得し、HTMLページに表示します。以下のコードを使用して、JavaScriptの部分を追加します。
<script>
  // フォルダのパスを指定
  var folderPath = "フォルダのパスをここに入力";
  // フォルダのコンテンツを取得
  fetch(folderPath)
    .then(response => response.text())
    .then(data => {
      // 取得したデータを処理し、リストアイテムを作成
      var fileListElement = document.getElementById("fileList");
      var files = data.split("\n");
      files.forEach(file => {
        var listItem = document.createElement("li");
        listItem.textContent = file;
        fileListElement.appendChild(listItem);
      });
    })
    .catch(error => {
      console.log("エラーが発生しました: " + error);
    });
</script>

  1. 上記のコードのfolderPath変数に表示したいフォルダのパスを指定します。例えば、folderPath = "folder/subfolder"のようにします。

  2. HTMLファイルを保存し、ブラウザで開きます。指定したフォルダのコンテンツがリストとして表示されます。