FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを書いたが、この応用で画像をアップロードせずにサムネイル表示できるんじゃないかと思った。調べてみたところFileReader APIを用いることで対応できた。以下に実装方法をメモ。
FileReader APIのリファレンス
https://developer.mozilla.org/ja/docs/Web/API/FileReader
サンプル
https://taitan916.info/sample/fileapi/index2.php
上記ページで画像を選択するとサムネイルが表示される。
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>File APIでサムネイル表示</title> </head> <style> .thumb img{ max-width: 150px; margin-bottom: 10px; } </style> <body> <input type="file" name="img_1" id="img_1" class="img"> <div id="thumb_1" class="thumb"></div> <input type="file" name="img_2" id="img_2" class="img"> <div id="thumb_2" class="thumb"></div> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript"> $(function(){ $('.img').change(function(){ //ID取得 let tmp_id = $(this).attr('id'); tmp_id = tmp_id.split('_'); const id = tmp_id[1]; //画像取得 const img = $('#img_' + id).prop('files')[0]; const type = img.type; //画像かどうかチェック if( !type.match(/^image/) ){ alert('画像を選択してください'); $(this).val(''); return false; } //FileReaderオブジェクトのインスタンス化 let reader = new FileReader(); //画像の読み込み reader.readAsDataURL(img); //読み込み失敗時 reader.onerror = function(){ alert('ファイル読み取りに失敗しました'); $(this).val(''); return false; } //画像を表示 reader.onload = function() { $('#thumb_' + id).html('<img src="' + reader.result + '">') } }); }) </script> </body> </html>
対応ブラウザ
以下リファレンスを確認したところ、おおよそのPC / SPブラウザに対応している模様。
https://developer.mozilla.org/ja/docs/Web/API/FileReader#browser_compatibility
所感
画像をアップロードすることなくサムネイル表示できるのは非常に便利かもしれない。さらにおおよそのブラウザにも対応しているようなので実用性がありそう。
参考サイト
http://tech.innovation.co.jp/2017/02/25/image-File-Reader.html
関連記事
-
-
javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...
-
-
スマホでページ内リンクからGoogleMapアプリを開く
スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...
-
-
JavaScriptでURLのクエリを取得する
やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...
-
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
マウスオーバーでの画像切り替えをJavaScriptで簡単に対応
マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...
-
-
javascriptでランダム英数字
やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...
-
-
ユーザーエージェントなどユーザー情報を取得する方法
上からUA、IP、ホスト名を取得。 $ua = $_SERVER['HTTP_U ...
-
-
JavaScriptで三項演算子の中に三項演算子
既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...
-
-
JavaScriptでURLのクエリを取得する2
直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...