<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>file API</title>
</head>
<body>
<input type="file" id="fileInput" multiple>
<p id="output">全てのファイル名</p>
<p id="pdf">pdfファイル</p>
<p id="sh">shファイル</p>
<script>
const fileInput = document.getElementById("fileInput"),
output = document.getElementById("output"),
pdf = document.getElementById("pdf"),
sh = document.getElementById("sh");
fileInput.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files;
console.log(fileList);
for (let num = 0; num < fileList.length; num++) {
let fileName = fileList[num].name
let splitFileName = fileName.split('.')
let fileType = splitFileName[splitFileName.length - 1]
console.log(fileType);
switch (fileType) {
case "pdf":
pdf.innerHTML += `<br>${fileName}`;
break;
case "sh":
sh.innerHTML += `<br>${fileName}`;
break;
default:
console.log(`${fileType}は受け付けてません`);
}
output.innerHTML += `<br>${num + 1}:${fileName}`
}
}
</script>
</body>
</html>
