FileReader APIを用いて画像をアップロードせずにサムネイル表示
2024/01/12
以前に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
関連記事
-
-
ajaxを使わずに非同期っぽくsubmitする
ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...
-
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...
-
-
ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法
ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...
-
-
formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法
フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...
-
-
スマホでフォームの画像アップロード部分でカメラを起動させる方法
formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...