blob: a081e16b4eca80016ebdd86a3e12d98ef8cc53a7 (
plain)
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: FileList
slug: Web/API/FileList
tags:
- API
- File API
- ファイル
browser-compat: api.FileList
translation_of: Web/API/FileList
---
{{APIRef("File API")}}
この型のオブジェクトは、 HTML の {{HTMLElement("input")}} 要素の `files` プロパティで返されます。これにより、 `<input type="file">` 要素で選択されているファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用している場合は、ウェブコンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は [`DataTransfer`](/ja/docs/Web/API/DataTransfer) オブジェクトを見てください。
> **Note:** {{Gecko("1.9.2")}} より前は、input 要素は一度に 1 つのファイルだけ選択することができます。すなわち、 FileList に入るファイルは 1 つだけです。 {{Gecko("1.9.2")}} から、 input 要素の multiple 属性が true の場合、 FileList に複数のファイルが入ります。
## ファイルリストの使用
すべての `<input>` 要素のノードには `files` 属性があり、これが `FileList` 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。
<input id="fileItem" type="file">
次のコードの行は、ノードのファイルリスト内の最初のファイルを [`File`](/ja/docs/Web/API/File) オブジェクトとして取得します。
```js
var file = document.getElementById('fileItem').files[0];
```
## メソッドの概要
<table class="standard-table">
<tbody>
<tr>
<td>
<code>File <a href="#item">item</a>(index);</code>
</td>
</tr>
</tbody>
</table>
## プロパティ
<table class="standard-table">
<tbody>
<tr>
<td class="header">属性</td>
<td class="header">型</td>
<td class="header">説明</td>
</tr>
<tr>
<td><code>length</code></td>
<td><code>integer</code></td>
<td>読み取り専用で、リスト内のファイル数を示します。</td>
</tr>
</tbody>
</table>
## メソッド
### item()
ファイルリスト内の指定された位置にあるファイルを表す [`File`](/ja/docs/Web/API/File) オブジェクトを返します。
File item(
index
);
#### 引数
- `index`
- : リストから受け取るファイルの 0 から始まる位置です。
#### 返値
要求されたファイルを表す [`File`](/ja/docs/Web/API/File) です。
## 例
この例では、`input` 要素を使用してユーザーが選択したすべてのファイルを反復処理します。
```js
// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
var fileInput = document.getElementById("myfileinput");
// files は FileList オブジェクトです (NodeList と同様)
var files = fileInput.files;
var file;
// files を反復処理
for (var i = 0; i < files.length; i++) {
// get item
file = files.item(i);
//or
file = files[i];
alert(file.name);
}
```
こちらが完全な例です。
```html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!-- multiple を設定して、複数のファイルが選択できるようにしています -->
<input id="myfiles" multiple type="file">
</body>
<script>
var pullfiles=function(){
// querySelector が好き
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// files.length をキャッシュ
var fl = files.length;
var i = 0;
while ( i < fl) {
// ループ内のファイル var をローカライズ
var file = files[i];
alert(file.name);
i++;
}
}
// input 要素の onchange を設定し pullfiles を呼び出すようにします。
document.querySelector("#myfiles").onchange=pullfiles;
//a.t
</script>
</html>
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [ウェブアプリケーションからのファイルを使用](/ja/docs/Web/API/File/Using_files_from_web_applications)
- [`File`](/ja/docs/Web/API/File)
- [`FileReader`](/ja/docs/Web/API/FileReader)
|
