SYNCERのロゴ
アイキャッチ画像

FileReader.readAsDataURL() - Data URIとして読み込む

readAsDataURL()は、FileReaderのメソッドです。ファイルを、Data URIとして読み込むメソッドです。例えば画像ファイルをこのメソッドで読み込んで、読み込んだデータをimg要素のsrc属性に指定すればブラウザに表示できます。

概要

名前
readAsDataURL
所属
FileReader
IDL
void readAsDataURL(Blob blob);
仕様書
https://w3c.github.io/FileAPI/#dfn-readAsDataURL

説明

引数(blob)には、対象のBlobを指定します。返り値はファイル内容をData URIで表現した値です。

チュートリアル

メソッドを利用してData URIとして読み込む例です。

<input type="file" multiple id="hoge">
// 要素を取得
var element = document.getElementById( "hoge" ) ;

// 読み込むファイル
var file = element.files[0] ;		// 1つ目のファイル

// FileReaderを作成
var fileReader = new FileReader() ;

// 読み込み完了時のイベント
fileReader.onload = function () {
	console.log( fileReader.result ) ;	// Data URI
}

// 読み込みを実行
fileReader.readAsDataURL( file ) ;

デモ

選択したファイルの中から1つ目、つまりインデックス番号0([0])のファイルを取得します。サイズが小さい画像ファイルを選択してみて下さい。選択したファイルが当サーバーに送信されることはありません。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
	input { width: 95% ; font-size: 16px ; }
</style>
</head>
<body>
	<input type="file" multiple id="hoge">
<hr>
	<div id="result"></div>
	<img id="fuga" width="200">
<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var resultElement = document.getElementById( "result" ) ;

element1.onchange = function () {
	var fileReader = new FileReader() ;

	fileReader.onload = function () {
		console.log( this.result ) ;
		resultElement.appendChild( new Text( this.result ) ) ;
		element2.src = this.result ;
	}

	var file = element1.files[0] ;
	fileReader.readAsDataURL( file ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
6.0+ 10+ 6.0+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。