<input type="file"> 選中多個檔案

admin發表於2020-04-02

預設狀態下，<input type="file"> 檔案域一次只能上傳一個檔案。

當前檔案域已經具備一次選中上傳多個檔案的能力，HTML5 新增此功能。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 2px dotted green;
}
</style>
<script>
window.onload = ()=> {
  let oFile = document.getElementById("file");
  let oShow =document.getElementById("show");
  oFile.onchange = function () {
    oShow.innerHTML = oFile.files.length;
  }
}
</script>
</head>
<body><div id="show"></div>
<input type="file" multiple id="file" /> 
</body>
</html>

只要為檔案域新增 multiple 屬性，即可實現多檔案選中上傳功能。

假設選中三個文字檔案，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202004/02/102639l9lxjj1xpuj48cjv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼比較簡單，本文不做介紹，更多內容參閱如下幾篇文章：

（1）.files 屬性參閱JavaScript files 屬性一章節。

（2）.length 屬性參閱FileList length 屬性一章節。

相關文章