JavaScriptで画像データをDataURLデータとして取得するreadAsDataURL()メソッドの使い方

画像データをサーバーに送信することができる形式で取得readAsDataURL()メソッド

input属性のtypeプロパティをfileにすることで、ブラウザ上で画像のアップロードが可能です。

input type="file"だけでサーバーにデータを送信する準備は完了していますが、ほとんどの場合、アップロードした画像をWEBページ上で表示しておきたいはずです。

実は、セキュリティ上の都合でinput type="file"だけではアップロードされた画像を表示することができません。

アップロードされた画像の表示はHTML5のFileReader APIのreadAsDataURL()メソッドを利用する必要があります。

使い方を見ていきましょう。

定義
DataURLとは?

DataURLは画像のデータそのものをテキストデータで表現したものです。

一種のデータフォーマットであり、プログラム上でのデータのやりとりで使います。

DataURLのサンプル
code
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAACSBAMAAABCnL4OAAAAG1BMVEVNcnJTU1P///82Njbd3d04ODgTExPAwMCDg4OJ2TSkAAABBElEQVRo3u3ZQQrCMBAF0OINgkKz1hO0niA4qBfwBuJeELoWAvHY1hZFUxqEfEwl/x/gkTDJMCTFQSFTkPOisZyDcrqBcg7K6QbKOSzHW0GOHDly5PLm1qFUybnleFZVcLCK4LR8yxVjmb1xFsppgXJWuuywnGA3K9hSwDgF5kosp8jFcBfvIEdyj6thgJttuSuQs7JHlkJ/LC6+sjfsQVHkyJEjNxVuOC1Piav9aZkcOXLk/pkLvAWk50JJzg0yrwPbJ0eOHDlyWXJl/yJ8BnGLnjMobnNqc4Rx2/y4V3FhnCGXmJNnDLAFoDi/C6C54LScmov/PQZzfn/nzzs5cuR+zt0B+liWBof5S0gAAAAASUVORK5CYII="

プロパティ

JavaScriptでサーバーに登録する画像のデータ

メソッド意味
readAsDataURL(ファイル)DataURLとしてファイルを読み込む
readAsDataURLの仕様

サンプルコード

サンプルコードとして、jpegまたはpngファイルだけを受け付けるアップローダーを用意し、アップロードされた時に画像をページ上に表示するコードを紹介します。

Output
Pug
#targetArea
		input#targetFileButton.form-control-file(type="file" accept=".png, .jpg")
	img#uploadedFileData(src="" alt="")
JavaScript
const targetFileButton = document.getElementById( 'targetFileButton' );
const uploadedFileData = document.getElementById( 'uploadedFileData' );

targetFileButton.addEventListener( 'change', onChange );

function onChange( event ) {
	const targetFileTarget = event.target;
	
	//取得される値は配列
	const targetFiles = targetFileTarget.files;
	
	//配列なので最初の値だけ格納
	const targetFiles0 = targetFiles[0];
	
	//おまけ:Alt属性にテキスト入れておく
	uploadedFileData.alt = targetFiles0.name;
	
	//FileReaderのインスタンスを作成する
	const fileReader = new FileReader();
	
	//画像DataURLとして読み込む
	fileReader.readAsDataURL(targetFiles0);
	
	//読み込み完了時の処理(ファイルの読み込み作業は非同期なのでreadAsDataURLイベントの完了を監視)
	fileReader.addEventListener('load', () => {
		//読み込み後はresultプロパティに格納される
		uploadedFileData.src = fileReader.result;
	});
}

インストラクター