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="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let file = document.getElementById("File");
  file.onchange = function () {
    console.log(this.files);
  }
}
</script>
</head>
<body>
<input type="file" id="File" /> 
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/02/154010i9sejbkdvvvktbj6.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章