勉強したことのメモ

webプログラマが勉強したことのメモ。

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

https://cly7796.net/blog/javascript/use-the-file-api-to-display-a-thumbnail-of-the-image-that-is-referenced-from-the-local/

 - JavaScript, HTML

  関連記事

テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

javascriptのfor文で負荷軽減

javascriptで配列の数だけループをまわす際、 for (i=0; i&l ...

3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

leaflet.jsとosmでマップ表示及びマーカー設置

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

leaflet.jsとOSMで現在地の取得

leaflet.jsとOpenStreetMapで現在位置を取得しマップ上にマー ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

JavaScriptで数値のカンマ区切り化とカンマ区切りの解除

JavaScriptで数値を3桁ごとにカンマ区切り化したい。また、それとは逆にカ ...

JavaScriptでcookieの保存

JavaScriptでcookieを保存したかったけど 方法が分からなかったので ...