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でスタックトレースを出力する関数Console.trace

console.trace()を実行するとコンソールにスタックとレースを出力することができます。 function test1() { test2(); } function test2() { co …

no image

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

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ライブラリMasonryの使い方

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