<input>タグで複数選択する場合は、'multiple'属性を追加します。
1 | <input type="file" multiple /> |
<input type="file" >でファイルが選択された際には、onchangeが呼び出されます。 選択されたファイルの情報は、'inputエレメントの'files'プロパティのfileListオブジェクトが保持しています。 'fileList'オブジェクトには、選択されたファイルの情報が配列で格納されています。選択されたファイルの数は 'fileList'オブジェクトの'length'プロパティに格納されます。
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 | <!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; // HTML文字列の生成 var fileListBody = "選択されたファイルの数 = " + fileCount + "<br/><br/>¥r¥n"; // 選択されたファイルの数だけ処理する for ( var i = 0; i < fileCount; i++ ) { // ファイルを取得 var file = fileList[ i ]; // ファイルの情報を文字列に格納 fileListBody += "[ " + ( i + 1 ) + "ファイル目 ]<br/>¥r¥n"; fileListBody += "name = " + file.name + "<br/>¥r¥n"; fileListBody += "type = " + file.type + "<br/>¥r¥n"; fileListBody += "size = " + file.size + "<br/>¥r¥n"; fileListBody += "lastModifiedDate = " + file.lastModifiedDate + "<br/>¥r¥n"; fileListBody += "lastModified = " + file.lastModified + "<br/>¥r¥n"; fileListBody += "<br/>¥r¥n"; } // 結果のHTMLを流し込む document.getElementById( "ID001" ).innerHTML = fileListBody;}// --></script><input type="file" onchange="OnFileSelect( this );" multiple /><ul id="ID001" ></ul></body></html> |
選択されたファイルの数 = 3 [ 1ファイル目 ] name = 5799399857_3ce584569a_z.jpg type = image/jpeg size = 181684 lastModifiedDate = Mon Jul 21 2014 09:34:48 GMT+0900 lastModified = 1405902888352 [ 2ファイル目 ] name = 6363615807_05159e4e4c_z.jpg type = image/jpeg size = 48185 lastModifiedDate = Sun Feb 08 2015 15:17:23 GMT+0900 lastModified = 1423376243662 [ 3ファイル目 ] name = 8097327748_d4c013f2c3_z.jpg type = image/jpeg size = 158208 lastModifiedDate = Mon Jul 21 2014 05:58:14 GMT+0900 lastModified = 1405889894477
