tatsuyasusukida/!README-javascript-image-preview.md

## !README-javascript-image-preview.md

      
    Raw
  

              !README-javascript-image-preview.md
            
          
    🏞 JavaScriptで画像ファイル選択時にプレビューを表示する方法

この記事のGistページ
デモ

この記事について

この記事では <input type="file"> 要素を使って選択された画像ファイルのプレビューをJavaScriptを使って表示する方法について紹介します。
おおまかな手順

おおまか手順を下記に示します。

コーディング
動作確認

コーディング

ターミナルで下記のコマンドを実行してコーディングの準備をします。
mkdir javascript-image-preview
cd javascript-image-preview
touch index.html main.js
index.html

エディタでindex.htmlを開いて下記の内容を入力します。
クリックしてindex.htmlへ移動
main.js

エディタでmain.jsを開いて下記の内容を入力します。
クリックしてmain.jsへ移動
ポイントを下記に示します。

input要素のchangeイベントハンドラでは、選択されたファイルのオブジェクトURLを作成してimg要素のsrc属性に設定します。ESC キーを押すなどしてファイルの選択をキャンセルすることもあるのでif文を使って選択されたファイルの件数をチェックしています。

動作確認

ブラウザでindex.htmlを開きます、macOSの場合はターミナルで下記のコマンドを実行すると便利です。
open index.html

画像ファイルの選択部をクリックして適当な画像ファイルを選択してプレビューが表示されることを確認します。

おわりに

WebサーバーでContent Security Policyを設定している場合はプレビューが表示されないことがあるのでご注意ください。特にChromeで開発していて本番環境でSafariやiPhoneからアクセスすると動かないことがあるので、その場合はimg-src、connect-src、media-srcなどに blob: を追加することをお試しください。また、この記事では扱いませんでしたが動画についても同様の手順でプレビューを表示することができます。画像や動画のプレビューを表示したいという要望は少なくないのでこの記事が実装方法を探している方のお役に立てば幸いです。最後までお読みいただきありがとうございました！

  
## img-check-01.png

      
    Raw
  

              img-check-01.png
            
          
## img-check-02.png

      
    Raw
  

              img-check-02.png
            
          
## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptで画像ファイル選択時にプレビューを表示する方法</title>
  </head>
  <body>
    <h1>JavaScriptで画像ファイル選択時にプレビューを表示する方法</h1>
    <p>画像ファイルを選択してプレビューが表示されることをご確認ください。</p>
    <form action="">
      <div>
        <label for="input">画像ファイル</label>
        <input type="file" name="input" id="input" accept="image/*">
        <figure id="figure" style="display: none">
          <figcaption>画像ファイルのプレビュー</figcaption>
          <img src="" alt="" id="figureImage" style="max-width: 100%">
        </figure>
      </div>
    </form>
    <script src="main.js"></script>
  </body>
</html>

## main.js
function main () {
  const input = document.querySelector('#input')
  const figure = document.querySelector('#figure')
  const figureImage = document.querySelector('#figureImage')

  input.addEventListener('change', (event) => { // <1>
    const [file] = event.target.files

    if (file) {
      figureImage.setAttribute('src', URL.createObjectURL(file))
      figure.style.display = 'block'
    } else {
      figure.style.display = 'none'
    }
  })
}

main()
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScriptで画像ファイル選択時にプレビューを表示する方法</title>
	</head>
	<body>
	<h1>JavaScriptで画像ファイル選択時にプレビューを表示する方法</h1>
	<p>画像ファイルを選択してプレビューが表示されることをご確認ください。</p>
	<form action="">
	<div>
	<label for="input">画像ファイル</label>
	<input type="file" name="input" id="input" accept="image/*">
	<figure id="figure" style="display: none">
	<figcaption>画像ファイルのプレビュー</figcaption>
	<img src="" alt="" id="figureImage" style="max-width: 100%">
	</figure>
	</div>
	</form>
	<script src="main.js"></script>
	</body>
	</html>
	function main () {
	const input = document.querySelector('#input')
	const figure = document.querySelector('#figure')
	const figureImage = document.querySelector('#figureImage')

	input.addEventListener('change', (event) => { // <1>
	const [file] = event.target.files

	if (file) {
	figureImage.setAttribute('src', URL.createObjectURL(file))
	figure.style.display = 'block'
	} else {
	figure.style.display = 'none'
	}
	})
	}

	main()