JavaScript FileList 集合

admin發表於2019-01-02
JavaScript

FileList 是一個物件集合，其成員是 File 物件。

關於 File 物件可以參閱JavaScript File 物件一章節。

一.生成 FileList 集合：

（1）.通過 <input file> 控制元件：

通過控制元件選中檔案時，此元素物件的 files 返回值是 FileList 集合。

（2）.通過拖拽：

關於拖拽的更多內容參閱Drag和Drop 拖拽一章節。

DataTransfer.files 屬性返回值是一個 FileList 集合。

二.集合的屬性與方法：

（1）.length：返回集合中檔案的數量，也就是 File 物件的數量。

（2）.item()：返回指定索引位置 File 物件，索引值從 0 開始計算，效果與使用中括號等同。

三.程式碼例項如下：


[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = ()=> {
  let file = document.getElementById("file");
  file.onchange = function () {
    console.log(this.files);
  }
}
</script>
</head>
<body>
<input type="file" multiple id="file" /> 
</body>
</html>

上傳一個檔案後，在控制檯截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/31/125015fh1dgwpfy1904940.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼簡單分析如下：

（1）.檔案域元素物件的 files 屬性可以返回 FileList 集合物件。

（2）.multiple 屬性可以使文字域具有多選能力。

相關文章