JavaScript files 屬性

admin發表於2020-04-16
JavaScript

files 屬性可以返回檔案域選中的檔案集合，HTML5 新增。

檔案域更多知識參閱 HTML input file 檔案域 一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
dom.files

dom 是 <input type="file"> 檔案域元素物件。

程式碼例項如下：

[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 oFile = document.getElementById("file");
  oFile.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/202004/16/100750vyh03lj421w02w0a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼簡單分析如下：

（1）.通過文字域選中三個文字檔案。

（2）.files 屬性返回 FileList 型別集合，儲存的是 File 物件。

（3）.每一個 File 物件表示一個選中的文字檔案。

特別說明：即便只選中一個檔案，files 屬性返回值也是一個 FileList 集合。

相關閱讀：

（1）.FileList 參閱 JavaScript FileList 集合 一章節。

（2）.File 參閱 JavaScript File 物件 一章節。

相關文章