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