JavaScriptでファイル一覧を取得する方法とは【メンターが回答】

「JavaScriptでファイル一覧を取得する方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。フォルダを指定するのではなくhtmlファイルがあるフォルダと同じ場所のファイル一覧を表示する方法についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptでファイル一覧を取得する方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

HTMLファイルと同じフォルダのファイル一覧を所得したいと思います。

このファイルの場合、フォルダを指定して一覧を表示していますが、フォルダを指定するのではなくhtmlファイルがあるフォルダと同じ場所のファイル一覧を表示するには、どの様にして、フォルダを指定すれば良いのでしょうか?

なお、サーバ上ではなくローカルフォルダを操作しています。

 

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <title>テスト</title>
  </head>
  <body>
  <script>
    function fileListDirectory(files) {
      var ファイル数 = files.length;
      var ファイル名 = new Array();
      var パス = new Array();
      for (i=0; i<ファイル数; i++) {
        ファイル名[i] = files[i].name;
        パス[i] = files[i].webkitRelativePath; // 行A
      }
      var 表示内容 = "";
      for (i=0; i<ファイル数; i++) {
        if (ファイル名[i] == ".") { // 行B
          表示内容 += "フォルダ:";
        }
        else {
          表示内容 += "file:";
        }
        表示内容 += パス[i] + "<br>";
      }
      document.getElementById('表示場所').innerHTML = 表示内容;
    }
  </script>
    <p><input type="file"
    webkitdirectory directory 
    onChange="fileListDirectory(this.files)"></p>
    <div id="表示場所" class="red">結果がここに表示されます。</div>
  </body>
</html>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

ブラウザで動作するJavaScriptには「ユーザが自発的にファイルを選んだとき」でないとファイルにアクセスできない制限がかかっています。なので、フォルダも同様にユーザの選択を経由しなければアクセスできません。

「フォルダを指定するのではなくhtmlファイルがあるフォルダと同じ場所のファイル一覧を表示するには、どの様にして、フォルダを指定すれば良いのでしょうか?」という質問に対する回答としては「そもそも仕組み的に不可能」ということになります。

WindowsだけでいいのならHTAを使ってみてはどうでしょうか。

 

以上、JavaScriptでファイル一覧を取得する方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptでファイル一覧を取得する方法について解説したよ。

大石ゆかり

JavaScriptではフォルダの中は検索出来ないんですか?

田島悠介

そうそう。PHPに依頼して処理してもらうか、HTAなどの言語を使う必要があるんだ。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScript内でdocument.writeを使わずにHTMLを書く方法についてメンターが回答しています。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。