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

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

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

no image

フレキシブルなJavaScriptチャートライブラリTauchartsの使い方

サンプルコード 公式ドキュメントのTutorialsの内、簡易的なものを実際に動かしてみます。https://api.taucharts.com/tutorials/1min.html <htm …

no image

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

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

no image

JavaScriptで呼び出し回数をカウントする関数Console.count

引数に任意のラベルを指定すると、ラベルごとに呼び出された回数をカウントし、現在の呼び出し回数を出力します。ラベルを省略した場合はラベルにdefaultを指定したものとして扱われます。 Console. …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector('i …