From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/api/filelist/index.html | 149 ++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/zh-tw/web/api/filelist/index.html (limited to 'files/zh-tw/web/api/filelist') 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 +--- +
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
+ +

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

+ +
+

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

+
+ +

使用 FileList

+ +

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

+ +
<input id="fileItem" type="file">
+
+ +

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

+ +
var file = document.getElementById('fileItem').files[0];
+
+ +

方法概觀

+ + + + + + + +
File item(index);
+ +

屬性

+ + + + + + + + + + + + + + +
屬性名稱型別描述
lengthinteger表示 FileList 物件中的檔案數量，唯讀。
+ +

方法

+ +

item()

+ +

回傳 FileList 中指定索引的 {{domxref("File")}} 物件。

+ +
File item(
+  index
+);
+
+ +
參數
+ +
+
index
+
要取得的檔案之索引（起始於零）。
+
+ +
回傳值
+ +

要求的 {{domxref("File")}} 物件。

+ +

範例

+ +

此範例演示了迭代所有之使用者於 <input> 元素選取的檔案：

+ +
// 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);
+}
+
+ +

以下是更完整的範例：

+ +
<!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>
+ +

規範

+ + + +

參見

+ + -- cgit v1.2.3-54-g00ecf