3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

inputタグで選択した画像をimgタグに表示する

投稿日:

コード

input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。

URL.createObjectURL()を使用する

FileReader.readAsDataURL()に受け取ったファイルを渡すとbase64エンコーディングされたdata:URLが返されるため、それをimg要素のsrc属性に設定することで画像を表示することができます。

<html>
  <head>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input accept="image/*" type="file" id="uploadImage">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      uploadImage.onchange = event => {
        const [file] = uploadImage.files
        if (file) {
          thumbnail.src = URL.createObjectURL(file)
        }
      }
    </script>
  </body>
</html>

FileReader.readAsDataURL()を使用する

FileReader.readAsDataURL()に受け取ったファイルを渡すとbase64エンコーディングされたdata:URLが返されるため、それをimg要素のsrc属性に設定することで画像を表示することができます。

<html>
  <head>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input accept="image/*" type="file" id="uploadImage">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      uploadImage.onchange = event => {
        const [file] = uploadImage.files
        if (file) {
          let reader = new FileReader();
          reader.onload = function() {
            thumbnail.src = reader.result;
          }
          reader.readAsDataURL(file);
        }
      }
    </script>
  </body>
</html>

jQueryを使用する場合

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input type="file" name="upload" id="upload" accept="image/*">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      $('#upload').change(function(){
        const [file] = this.files
        if (file) {
          let reader = new FileReader();
          reader.onload = function() {
            $('#thumbnail').attr('src', reader.result);
          }
          reader.readAsDataURL(file);
        }
      });
    </script>
  </body>
</html>

リンク

URL.createObjectURL() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL

FileReader – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/FileReader

FileReader.readAsDataURL() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

JavaScriptで位置座標を取得する

navigator.geolocation.getCurrentPosition関数で取得できます。 引数には成功時、失敗時のコールバック関数と、オプションを渡します。 <html> &l …

no image

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。 公式サイト https://masonry.d …

no image

JavaScriptでバイナリからpngファイルを識別する

input要素で指定した画像がpngファイルか確認し、pngファイルだった場合にその幅と高さをコンソールに出力しています。 <html> <head> </head&gt …