写一个多文件上传的前端模板
时间: 2024-05-04 12:22:07 浏览: 11
以下是一个基本的多文件上传的前端模板,可以上传多个文件并显示上传进度:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多文件上传</title>
<style>
.progress {
width: 100%;
height: 20px;
border: 1px solid #ccc;
margin: 10px 0;
position: relative;
}
.progress-bar {
height: 100%;
background-color: #4CAF50;
position: absolute;
top: 0;
left: 0;
}
.progress-text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<h1>多文件上传</h1>
<form>
<input type="file" name="file" multiple>
<button type="submit">上传</button>
</form>
<div id="progress"></div>
<script>
var form = document.querySelector('form');
var progress = document.querySelector('#progress');
form.addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = function(event) {
var percent = (event.loaded / event.total) * 100;
var progressBar = progress.querySelector('.progress-bar');
var progressText = progress.querySelector('.progress-text');
if (!progressBar) {
progressBar = document.createElement('div');
progressBar.classList.add('progress-bar');
progress.appendChild(progressBar);
}
progressBar.style.width = percent + '%';
if (!progressText) {
progressText = document.createElement('div');
progressText.classList.add('progress-text');
progress.appendChild(progressText);
}
progressText.textContent = percent.toFixed(2) + '%';
};
xhr.send(formData);
});
</script>
</body>
</html>
```
在这个模板中,我们使用了 HTML5 的 FormData 对象来收集表单数据,然后通过 XMLHttpRequest 对象发送到服务器。在上传过程中,我们通过 XMLHttpRequest.upload.onprogress 事件来监听上传进度,并在页面上显示进度条。注意,我们还设置了 `multiple` 属性,以允许用户选择多个文件进行上传。