JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】画像をアップロードする前にプレビュー表示する方法を解説

Webアプリケーションで画像をアップロードする際、送信前に選択した画像を画面上で確認できれば、ユーザーは誤ったファイルを選んでいないかをチェックでき、より安心して操作できます。JavaScriptでは、FileReader()を使用することで、ファイル選択と同時に画像を即座にプレビュー表示できます。

実装サンプルコード

以下は、FileReaderを使って選択した画像をプレビュー表示する完全なHTMLコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<input type='file' id="yourImage" />
<img id="chooseImage" src="#" alt="image" />
</form>
<script>
    function readImage(fileInput) {
      if (fileInput.files && fileInput.files[0]) {
          var takingInputFile = new FileReader();
          takingInputFile.onload = function(event) {
            $('#chooseImage').attr('src', event.target.result);
          }
          takingInputFile.readAsDataURL(fileInput.files[0]);
      }
    }
    $("#yourImage").change(function() {
        readImage(this);
    });
</script>
</body>
</html>

コードの仕組み

このコードの処理の流れは以下のとおりです。

  1. ファイルの選択： <input type="file"> でユーザーが画像ファイルを選択すると、changeイベントが発生し、readImage()関数が呼び出されます。
  2. FileReaderの生成： new FileReader() でファイル読み込み用のオブジェクトを作成します。
  3. Data URLとして読み込み： readAsDataURL() メソッドにより、選択されたファイルをBase64エンコードされたData URLとして読み込みます。
  4. プレビューの表示： 読み込みが完了すると onload イベントが発火し、event.target.result に格納されたData URLを <img> 要素の src 属性に設定することで、画像が画面に表示されます。

プログラムの実行方法

上記のプログラムを実行するには、コードを anyName.html（index.html） などのファイル名で保存します。その後、ファイルを右クリックし、VS Codeエディターの拡張機能「Live Server」の 「Open with Live Server」 オプションを選択してブラウザで開きます。

実行結果

ブラウザ上で画像ファイルを選択すると、アップロードボタンを押す前に、選択した画像がそのままページ内にプレビュー表示されます。

【JavaScript】画像をアップロードする前にプレビュー表示する方法を解説

このように、FileReader APIを活用すればサーバーへの送信前でも画像を確認できるため、ユーザー体験（UX）の向上につながります。なお、jQueryを使用せず document.getElementById() と素のJavaScriptだけでも同様の実装が可能です。

  1. HTMLで画像をレスポンシブ対応にする方法【初心者向け解説】

    Webページをスマートフォンやタブレットなど、さまざまな画面サイズに対応させるには、画像をレスポンシブ対応にすることが重要です。HTMLで画像をレスポンシブにするには、CSSで2つのプロパティを設定するだけで実現できます。レスポンシブ画像の基本：2つのプロパティまず、<img>タグを使って画像を配置します。そのうえで、以下の2つのプロパティを指定しましょう。height: auto; … 画像の高さを幅に合わせて自動的に調整します。max-width: 100%; … 画像が親要素（画面幅）より大きくならないよう制限します。具体的には、次のようにインラインスタイルとして記述します。

  2. HTMLで画像をリンクとして使用する方法

    HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画