blob: 8176496fe241049624b89c651bdb961856a7bea3 (
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
155
|
---
title: FileList
slug: Web/API/FileList
translation_of: Web/API/FileList
---
<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
<p>이 타입의 객체는 HTML {{HTMLElement("input")}} 엘리먼트의 <code>files</code> 속성으로부터 반환됩니다; 이는 <code><input type="file"></code> 엘리먼트로 선택된 파일의 리스트에 접근하도록 합니다. 또한 드래그 앤 드랍 API를 사용할 때 웹 컨텐트에 드랍된 파일의 리스트에도 사용됩니다; 이 사용에 대한 자세한 내용은 <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> 객체를 보십시오.</p>
<div class="note">
<p><strong>Note:</strong> {{Gecko("1.9.2")}} 이전에는, input 엘리먼트는 한번에 하나의 선택된 파일만 지원되었습니다, 이는 FileList가 하나의 파일만을 포함했음을 의미합니다. {{Gecko("1.9.2")}}를 시작으로, input 엘리먼트의 multiple 속성이 true이면, FileList는 복수의 파일을 포함할 수 있습니다.</p>
</div>
<h2 id="Using_the_file_list" name="Using_the_file_list">파일 리스트 사용</h2>
<p>모든 <code><input></code> 엘리먼트 노드는 이 리스트의 항목에 접근하도록 허용하는 <code>files</code> 배열을 가지고 있습니다. 예를 들어, HTML이 다음의 파일 입력을 포함한다면:</p>
<pre><input id="fileItem" type="file">
</pre>
<p> </p>
<p>다음 코드 행은 노드의 파일 목록에있는 첫 번째 파일을 File 객체로 가져옵니다.</p>
<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
</pre>
<h2 id="Method_overview" name="Method_overview">Method overview</h2>
<table class="standard-table">
<tbody>
<tr>
<td><code>File <a href="#item ()">item</a>(index);</code></td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">Properties</h2>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Attribute</td>
<td class="header">Type</td>
<td class="header">Description</td>
</tr>
<tr>
<td><code>length</code></td>
<td><code>integer</code></td>
<td>목록에있는 파일의 수를 나타내는 읽기 전용 값.</td>
</tr>
</tbody>
</table>
<h2 id="Methods" name="Methods">Methods</h2>
<h3 id="item()" name="item()">item()</h3>
<p> </p>
<pre dir="ltr" id="tw-target-text">파일리스트의 지정된 인덱스에있는 파일을 나타내는 File 객체를 리턴합니다.</pre>
<p> </p>
<pre> File item(
index
);
</pre>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<dl>
<dt><code>index</code></dt>
<dd>리스트로부터 받은 파일의 인덱스로, 0부터 시작합니다.</dd>
</dl>
<h6 id="Return_value" name="Return_value">Return value</h6>
<p>요청된 파일을 나타내는 <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> 입니다.</p>
<h2 id="Example" name="Example">예시</h2>
<p>이 예시는 <code>input</code> 엘리먼트를 사용하여 사용자에 의해 선택된 모든 파일을 순회합니다:</p>
<pre class="brush:js">// fileInput is an HTML input element: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");
// files is a FileList object (similar to NodeList)
var files = fileInput.files;
var file;
// loop through files
for (var i = 0; i < files.length; i++) {
// get item
file = files.item(i);
//or
file = files[i];
alert(file.name);
}
</pre>
<p>완전한 코드는 다음과 같습니다.</p>
<pre class="brush:html"><!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--multiple is set to allow multiple files to be selected-->
<input id="myfiles" multiple type="file">
</body>
<script>
var pullfiles=function(){
// love the query selector
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// cache files.length
var fl = files.length;
var i = 0;
while ( i < fl) {
// localize file var in the loop
var file = files[i];
alert(file.name);
i++;
}
}
// set the input element onchange to call pullfiles
document.querySelector("#myfiles").onchange=pullfiles;
//a.t
</script>
</html></pre>
<h2 id="Specification" name="Specification">명세</h2>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML5 working draft)</li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
<li><code><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code></li>
<li><code><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li>
</ul>
|
