files/zh-tw/web/api/filelist/index.html


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

---
title: FileList
slug: Web/API/FileList
translation_of: Web/API/FileList
---
<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>

<p><code>FileList</code> 型別物件通常來自 HTML {{HTMLElement("input")}} 元素 {{domxref("Document_Object_Model", "DOM")}} 物件的 <code>files</code> 屬性（{{Glossary("property/JavaScript", "property")}}）。你可以操作 <code>FileList</code> 物件來存取使用者透過 <code>&lt;input type="file"&gt;</code> 元素所選取的檔案，或由拖放操作所產生的檔案（請參考 {{domxref("DataTransfer")}} 物件的更多使用細節）。</p>

<div class="note">
<p><strong>註：</strong>在 {{Gecko("1.9.2")}} 之前，{{HTMLElement("input")}} 元素只支援一次選取一個檔案，這代表了 <code>FileList</code> 只能夠包含一個 <code>File</code> 物件。從 {{Gecko("1.9.2")}} 開始，假如 <code>&lt;input&gt;</code> 元素的 <code>multiple</code> 屬性（attribute）為 true，則 FileList 就可能會包含多個檔案。</p>
</div>

<h2 id="Using_the_file_list" name="Using_the_file_list">使用 FileList</h2>

<p>所有 <code>&lt;input&gt;</code> 元素節點的 {{domxref("Document_Object_Model", "DOM")}} 物件都擁有 <code>files</code> 屬性（{{Glossary("property/JavaScript", "property")}}），此屬性即為 <code>FileList</code>，是一個可藉此存取使用者選取之檔案的類陣列物件。以下範例展示了一個 <code>type</code> 屬性（{{Glossary("attribute")}}）值為 <code>file</code> 的 HTML <code>&lt;input&gt;</code> 元素：</p>

<pre class="brush: html">&lt;input id="fileItem" type="file"&gt;
</pre>

<p>下面範例演示了如何取得 <code>&lt;input&gt;</code> 元素節點中所包含的第一個 {{domxref("File")}} 型別物件：</p>

<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
</pre>

<h2 id="Method_overview" name="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">屬性</h2>

<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>表示 <code>FileList</code> 物件中的檔案數量，唯讀。</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods" name="Methods">方法</h2>

<h3 id="item()" name="item()">item()</h3>

<p>回傳 <code>FileList</code> 中指定索引的 {{domxref("File")}} 物件。</p>

<pre class="brush: js">File item(
  index
);
</pre>

<h6 id="Parameters" name="Parameters">參數</h6>

<dl>
 <dt><code>index</code></dt>
 <dd>要取得的檔案之索引（起始於零）。</dd>
</dl>

<h6 id="Return_value" name="Return_value">回傳值</h6>

<p>要求的 {{domxref("File")}} 物件。</p>

<h2 id="Example" name="Example">範例</h2>

<p>此範例演示了迭代所有之使用者於 <code>&lt;input&gt;</code> 元素選取的檔案：</p>

<pre class="brush:js">// fileInput is an HTML input element: &lt;input type="file" id="myfileinput" multiple&gt;
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 &lt; files.length; i++) {

    // get item
    file = files.item(i);
    //or
    file = files[i];

    alert(file.name);
}
</pre>

<p>以下是更完整的範例：</p>

<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--multiple is set to allow multiple files to be selected--&gt;

&lt;input id="myfiles" multiple type="file"&gt;

&lt;/body&gt;

&lt;script&gt;

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 &lt; 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
&lt;/script&gt;

&lt;/html&gt;</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">參見</h2>

<ul>
 <li><a href="/zh-TW/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a></li>
 <li>{{domxref("File")}}</li>
 <li>{{domxref("FileReader")}}</li>
</ul>