当表单在网页上提交时，如何在上传文件时显示弹出窗口

Question

我使用'input'标记中具有属性'multiple'的类型'file'在网页上上传多个文件。一旦我点击提交按钮，上传文件需要很长时间，直到所有文件上传完毕，用户必须等待下一个网页。以下是我使用的语法：

<form method="POST" action="" enctype="multipart/form-data" id="form_submit">
<div class="form-group">
<label for="Label1"><strong>Upload files</strong>
</label>
<br>
<input type="file" id="Label1" name="Label1" multiple">
</div>
<button type="submit">Submit</button>
</form>

我想在这里添加的是按下提交按钮时的弹出窗口，它将显示当前正在上传的文件。如何使用javascript来实现这一点？

Answer 1

当按下提交按钮时，我想在这里添加一个弹出窗口，它将显示当前正在上传的文件。

你要求太多了。但这里有一个很酷很简单的例子，告诉用户上传正在处理中。

// Submit handler
document.querySelector("form").addEventListener("submit", function(e) {
// Make sure the are files
let fileCount = this.querySelector("[type='file']").files.length
if (fileCount) {
// Toggle the the "Uploading..." message
document.querySelector("#uploading-msg").classList.toggle("msg-hidden");
// Disable the button
this.querySelector("[type='submit']").setAttribute("disabled", true);
} else {

// Do not submit if there are no files
e.preventDefault();
}
})

// Do not use that JS!
// It's just to disable the submit in this demo
document.querySelector("form").addEventListener("submit", e => e.preventDefault())

#uploading-msg,
#uploading-msg+.dots {
color: green;
}
.msg-hidden,
.msg-hidden+.dots {
display: none !important;
}
.dots {
display: inline-block !important;
position: absolute;
animation: 2s infinite animated-dots;
overflow: hidden;
}
@keyframes animated-dots {
0% {
width: 0;
}
100% {
width: 0.7em;
}
}

<form method="POST" action="" enctype="multipart/form-data" id="form_submit">
<div class="form-group">
<label for="Label1"><strong>Upload files</strong>
</label>
<br>
<input type="file" id="Label1" name="Label1" multiple>
</div>
<button type="submit">Submit</button>
<span id="uploading-msg" class="msg-hidden">Uploading</span>
<div class="dots">...</div>
</form>