initial commit

1 files changed, 149 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/filelist/index.html b/files/zh-tw/web/api/filelist/index.html
new file mode 100644
index 0000000000..56c2f02235
--- /dev/null
+++ b/files/zh-tw/web/api/filelist/index.html
@@ -0,0 +1,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>