JavaScriptでファイル選択ダイアログを表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでファイル選択ダイアログを表示する方法について現役エンジニアが解説しています。ファイル選択ダイアログとは、スマホやパソコンからファイルを選択してアップロードする際に使用する画面です。clickイベントを発動させる必要がありますが、ユーザー操作が必要になります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでファイル選択ダイアログを表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでファイル選択ダイアログを表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ファイル選択ダイアログとは

ファイル選択ダイアログとは、スマホやパソコンからファイルを選択してアップロードする際に使用する画面です。

ファイル選択ダイアログはファイル要素( type=”file” の <input> 要素)を使って表示することができます。

<input type="file">

ファイル要素について、詳しくは以下も参考にしてください。

MDN <input type=”file”>

 

JavaScriptでファイル選択ダイアログを表示する方法

JavaScriptでファイル選択ダイアログを表示するには、ファイル要素のclickイベントを発動させます。ただし注意点として、ファイル要素のclickイベントは「別のボタンをクリックする」などのユーザー操作からでないと発動できません。

「ページロード時」などで発動させようとしても以下の警告が出て起動しないので注意しましょう。

File chooser dialog can only be shown with a user activation.

 

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

実際に書いてみよう

今回のサンプルプログラムでは、ファイル要素について確認します。ライブラリはjQueryを使用しています。

  • JavaScriptでファイル選択ダイアログを表示する方法
  • ファイル要素で選択したファイルの情報を取得する方法
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>
<body>
  <form id="form1">
    <input type="file" accept=".jpg,.jpeg,.png,.gif" id="file1"/>
    <br><br>
    <button id="open">ファイル選択ダイアログを表示</button>
    <br><br>
    <input type="submit" value="送信"/> 
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
    // ボタンを押したらファイル選択ダイアログを表示する
    $("#open").on("click", () => {
      $("#file1").click();
      return false;
    });
 
    // 送信ボタンが押されたときの処理
    $("#form1").on("submit", () => {
      // ファイル要素から、選択されたファイルを取得する
      const files = $("#file1")[0].files;

      // ファイルが選択されていなかったら終了
      if (files.length === 0) {
        console.log("ファイルが選択されていません");
        return false;
      }

      // 1つ目のファイルを取得する
      const file = files[0];

      // 選択されたファイル名を出力
      const filename = file.name;
      console.log(`選択されたファイル名:${filename}`);

      // Submitイベントをキャンセルする
      return false;
    });
  </script>
</body>
</html>

実行結果は以下のようになります。

 

筆者プロフィール

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。