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

メールアドレスが公開されることはありません。

関連記事

no image

JavaScriptで0埋めする方法

こんにちは、今日はJavaScriptで0埋めする方法についてまとめていきます。 0埋め 以下のような関数で第一引数に0埋めしたい数値を、第二引数に数値の桁数を指定すると、指定桁数になるように0埋めさ …

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)

no image

動画を埋め込むHTML要素<video>の使い方

動画を埋め込む 以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。 <video src="movie.mp4"></ …

no image

JavaScriptで位置座標を取得する

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

no image

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

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