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