<input type="file" />で複数のファイルを選択する

複数選択の設定

<input>タグで複数選択する場合は、'multiple'属性を追加します。

<input type="file" multiple />

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

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

ファイルの情報

file.name : ファイル名
file.type : ファイルタイプ
file.size : ファイルサイズ
file.lastModifiedDate : 最終更新日時
file.lastModified : 最終更新日時( January 1970 00:00:00 UTC (Unix Epoch).からのミリ秒数を表す整数値 )

<!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;

	// 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

「プロ生ちゃんカレンダー作成」無料です

「プロ生ちゃんマインスイーパー」無料です

動画をサムネイル表示で管理！！
大量の動画を直観的に管理できます。
FavMovieAlbum無料です。

「プロ生ちゃんマインスイーパー」無料です

わびさびサンプルソース

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

わびさびサンプルソース