ファイル選択コントロールについて
| ・ | ファイル選択コントロールについて |
| ・ | ファイル選択コントロールを作成する |
| ・ | ファイルが選択されたか調べる |
| ・ | ファイルの複数選択を有効にする（HTML5 世代） |
| ・ | 選択可能なファイルの種類を制限する（HTML5 世代） |
ファイル選択コントロールについて
■ファイル選択コントロールについて
ファイル選択コントロールを使用すると、ユーザーがファイルを選択できるようになります。
ファイル選択コントロールは、<INPUT> 要素です。
type 属性に "file" を指定します。
<INPUT> タグを使用して、ファイル選択コントロールを表示する
<form>
<input type="file" >
</form>
サンプル表示
■ファイルのアップロードについて
ファイル選択コントロールを作成する
■ファイル選択コントロールを動的に作成する
■ HTMLInputElement オブジェクトを作成する
document.createElement() メソッドを使用します。
引数に、"input" を指定します。
動的に HTMLInputElement オブジェクトを作成する
// HTMLInputElement オブジェクトを作成する
var element = document.createElement("input");
// 出力テスト
console.log(element);
■コントロールタイプを「ファイル選択」に設定する
type 属性を使用します。
「ファイル選択」に変更するには、"file" を指定します。
コントロールタイプを「ファイル選択」に設定する
// HTMLInputElement オブジェクトを作成する
var input_file = document.createElement("input");
// コントロールタイプを「ファイル選択」に設定する
input_file.type = "file";
■ラジオボタンをブラウザに表示する
HTMLInputElement オブジェクトを、任意のノードリストに登録します。
ファイル選択コントロールを動的に作成して、ブラウザに表示する
// ------------------------------------------------------------
// HTMLInputElement オブジェクトを作成する
// ------------------------------------------------------------
var input_file = document.createElement("input");
// コントロールタイプを「ファイル選択」に設定する
input_file.type = "file";
// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(input_file);
■静的な <INPUT> タグから、HTMLInputElement オブジェクトを取得する
要素を取得する方法については、こちらで解説しています。
静的な <INPUT> タグから、HTMLInputElement オブジェクトを取得する
<html>
<body>
<form>
<input type="file" id="aaa" >
</form>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var input_file = document.getElementById("aaa");
// 出力テスト
console.log(input_file);
//-->
</script>
</body>
</html>
ファイルが選択されたか調べる
■ファイルが選択されたか調べる
ファイルが選択されたか調べるには、onchange イベントを使用します。
選択されたファイルの情報を取得するには、value プロパティを使用します。
空文字 "" が得られる場合、ファイルが選択されていません。
ファイルが選択されたか調べる
<html>
<body>
<form>
<input type="file" id="aaa" >
</form>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var input_file = document.getElementById("aaa");
// ------------------------------------------------------------
// 値が変化した時に実行されるイベント
// ------------------------------------------------------------
input_file.onchange = function (){
// ファイルが選択されたか
if(input_file.value){
console.log("ファイルが選択された:" + input_file.value);
}else{
console.log("ファイルが未選択");
}
};
//-->
</script>
</body>
</html>
■ファイルを取得する（HTML5 世代）
■選択されたファイルをすべて取得する
files プロパティを使用します。
FileList オブジェクトが得られます。
InternetExplorer 9 以前では、対応していません。
■ FileList オブジェクトについて
FileList オブジェクトは、配列のように中身を取り出せます。
中には、File オブジェクトが格納されています。
■ File オブジェクトについて
こちらで解説しています。
■取得例
選択されたすべてのファイルを順番に取得する
<html>
<body>
<form>
<input type="file" id="aaa" multiple >
</form>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var input_file = document.getElementById("aaa");
// ------------------------------------------------------------
// 値が変化した時に実行されるイベント
// ------------------------------------------------------------
input_file.onchange = function (){
// ファイルが選択されたか
if(!(input_file.value)) return;
// FileList オブジェクトを取得する
var file_list = input_file.files;
if(!file_list) return;
var i;
var num = file_list.length;
for(i=0;i < num;i++){
// File オブジェクトを取得する
var file = file_list[i];
// 出力テスト
console.log("--- id:" + i);
console.log("name:" + file.name);
console.log("size:" + file.size);
console.log("type:" + file.type);
}
};
//-->
</script>
</body>
</html>
ファイルの複数選択を有効にする（HTML5 世代）
■ファイルの複数選択を有効にする
ファイルの複数選択を有効にするには、multiple 属性を使用します。
InternetExplorer 9 以前では、対応していません。
■静的に有効にする場合
ファイルの複数選択を有効にする（静的）
<form>
<input type="file" multiple >
</form>
■動的に有効にする場合
ファイルの複数選択を有効にするには、multiple プロパティを使用します。
true をセットします。
ファイルの複数選択を有効にする（動的）
// HTMLInputElement オブジェクトを作成する
var input_file = document.createElement("input");
// コントロールタイプを「ファイル選択」に設定する
input_file.type = "file";
// ファイルの複数選択を有効にする
input_file.multiple = true;
// BODY のノードリストに登録する
document.body.appendChild(input_file);
選択可能なファイルの種類を制限する（HTML5 世代）
■選択可能なファイルの種類を制限する
選択可能なファイルの種類を制限するには、accept 属性を使用します。
InternetExplorer 9 以前では、対応していません。
絶対的な制限ではありません。
ユーザーは、すべてのファイルを選択することができます。
■コンテンツタイプについて
選択可能としたいコンテンツタイプ（MIME Type）を、文字列で指定します。
コンテンツタイプの種類の一例です。
| 文字列 | 説明 |
| "text/plain" | テキスト文書 |
| "application/xml" | XML 文書 |
| "image/jpeg" | JPEG 画像ファイル |
| "image/png" | PNG 画像ファイル |
| "audio/mpeg" | MP3 オーディオファイル |
テキスト文書のみ選択できるよう設定する（静的）
<input type="file" accept="text/plain" >
■特殊な記述方法について
複数のコンテンツタイプを指定する事もできます。
カンマ "," で区切ります。
「テキスト文書」と「HTML 文書」と「XML 文書」のみ選択できるよう設定する（静的）
<input type="file" accept="text/plain,text/html,application/xml" >
ワイルドカード "*" を使用する事もできます。
すべての画像ファイルのみ選択できるよう設定する（静的）
<input type="file" accept="image/*" >
すべてのオーディオとビデオファイルのみ選択できるよう設定する（静的）
<input type="file" accept="audio/*,video/*" >
■動的に有効にする場合
選択可能なファイルの種類を制限するには、accept プロパティを使用します。
記述方法は同じです。
テキストファイルのみ選択できるよう設定する（動的）
// HTMLInputElement オブジェクトを作成する
var input_file = document.createElement("input");
// コントロールタイプを「ファイル選択」に設定する
input_file.type = "file";
// 選択可能なファイルの種類を制限する
input_file.accept = "text/*";
// BODY のノードリストに登録する
document.body.appendChild(input_file);