<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'に設定すると、画像を表示する事ができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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> |
