FileList
FileList
型別物件通常來自 HTML <input>
元素 DOM
物件的 files
屬性(property)。你可以操作 FileList
物件來存取使用者透過 <input type="file">
元素所選取的檔案,或由拖放操作所產生的檔案(請參考 DataTransfer
物件的更多使用細節)。
備註:在 Gecko 1.9.2 之前,<input>
元素只支援一次選取一個檔案,這代表了 FileList
只能夠包含一個 File
物件。從 Gecko 1.9.2 開始,假如 <input>
元素的 multiple
屬性(attribute)為 true,則 FileList 就可能會包含多個檔案。
使用 FileList
方法概觀
File item(index); |
---|
屬性
屬性名稱 | 型別 | 描述 |
---|---|---|
length |
integer |
表示 FileList 物件中的檔案數量,唯讀。 |
方法
item()
範例
此範例演示了迭代所有之使用者於 <input>
元素選取的檔案:
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);
}
以下是更完整的範例:
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>
規範
Specification |
---|
File API # filelist-section |
HTML Standard # dom-input-files-dev |