わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。

<input type="file" />で選択した画像を、選択後すぐに表示させる

選択されたファイルの取得

<input type="file" >でファイルが選択された際には、onchangeが呼び出されます。 選択されたファイルの情報は、'inputエレメントの'files'プロパティのfileListオブジェクトが保持しています。 'fileList'オブジェクトには、選択されたファイルの情報が配列で格納されています。選択されたファイルの数は 'fileList'オブジェクトの'length'プロパティに格納されます。

<imgタグ>に設定する

選択されたファイルは、'fileList[]'に格納されますが、この状態では<img>タグの'src'に設定できません。 'src'に設定する為には、URLに変換する必要があります。 URLの変換には、FileReaderクラスのreadAsDataURL()関数を呼び出します。readAsDataURL関数はファイルを読み込んで URLに変換してくれます。readAsDataURL()は非同期で処理され、完了後はonload()関数が呼び出されます。 処理結果は、'fileReader.result'に格納されます。 'fileReader.result'を<img>タグの'src'に設定すると、画像を表示する事ができます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
</head>
<body>
<h1>&lt;input type="file"&gtで選択した画像をすぐに表示する</h1>
<font color='red'>(複数の画像ファイルを選択できます)</font>
<script type="text/javascript" language="javascript">
<!--
function OnFileSelect( inputElement )
{
	// ファイルリストを取得
	var fileList = inputElement.files;

	// ファイルの数を取得
	var fileCount = fileList.length;

	var loadCompleteCount = 0;
	var imageList = "";

	// 選択されたファイルの数だけ処理する
	for ( var i = 0; i < fileCount; i++ ) {

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

		// ファイルを取得
		var file = fileList[ i ];

		// 読み込み完了時の処理を追加
		fileReader.onload = function() {

			// <li>,<img>タグの生成
			imageList += "<li><img src=¥"" + this.result + "¥" /></li>¥r¥n";

			// 選択されたファイルすべの処理が完了したら、<ul>タグに流し込む
			if ( ++loadCompleteCount == fileCount ) {

				// <ul>タグに<li>,<img>を流し込む
				document.getElementById( "ID001" ).innerHTML = imageList;
			}
		};

		// ファイルの読み込み(Data URI Schemeの取得)
		fileReader.readAsDataURL( file );
	}
}
// -->
</script>
<input type="file" onchange="OnFileSelect( this );" multiple />
<ul id="ID001" ></ul>
</body>
</html>

実行結果





わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。