在JavaScript中实现带进度条提示的多视频上传功能是一项常见的需求，特别是在网页应用中，用户可能需要上传多个视频文件，并且需要实时了解每个文件的上传进度。以下将详细讲解如何使用JavaScript来实现这一功能。
我们需要理解上传过程中的关键元素和事件。HTML部分提供了文件输入元素（`<input type="file">`）供用户选择视频，以及进度条元素（`.progress-bar`）用于显示上传进度。每个多视频上传的容器中都有一个`<input type="file">`和一个进度条，这样可以同时处理多个视频的上传。
在JavaScript中，我们主要利用`FormData`对象和`XMLHttpRequest`或`fetch` API来实现文件的异步上传。当用户选择文件后，我们可以监听`change`事件，获取到文件对象，然后创建一个`FormData`实例，将文件添加到其中。
以下是一个简化的示例代码：
```javascript
// 获取所有视频上传输入元素
const avatarVideos = document.querySelectorAll('.avatarVideo');
// 监听每个视频文件输入元素的change事件
avatarVideos.forEach(input => {
input.addEventListener('change', function(event) {
const file = event.target.files[0]; // 获取用户选择的文件
if (!file) return;
const form = new FormData();
form.append('video', file); // 将文件添加到FormData
// 创建一个XMLHttpRequest对象
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/video'); // 假设的上传URL
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
// 更新进度条宽度
const progress = Math.round((e.loaded / e.total) * 100);
const progressBar = this.parentNode.querySelector('.progress-bar');
progressBar.style.width = `${progress}%`;
progressBar.querySelector('.sr-only').textContent = `${progress}% Complete`;
}
});
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上传成功，可以在此处理返回的数据，例如更新隐藏的video_id输入
const response = JSON.parse(xhr.responseText);
const hiddenInput = this.parentNode.querySelector('input[type="hidden"]');
hiddenInput.value = response.videoId;
} else if (xhr.readyState === 4) {
// 处理错误情况
console.error('上传失败');
}
};
xhr.send(form); // 开始上传
});
});
```
在上述代码中，我们首先获取用户选择的文件，然后创建一个`FormData`实例并将文件添加进去。接着，我们创建一个`XMLHttpRequest`对象，设置上传的URL，并添加`progress`事件监听器来更新进度条。当上传完成时，我们根据服务器返回的数据（假设是JSON格式）更新隐藏的`video_id`输入字段，以便后续处理。
需要注意的是，这个例子使用了原生的`XMLHttpRequest`，但现代浏览器也可以使用`fetch` API来实现相同的功能，这通常能提供更好的错误处理和更简洁的代码结构。同时，为了安全和用户体验，实际项目中还应考虑添加验证、错误处理、取消上传等额外功能。
样式方面，`bootstrap.css`被引用，这表明可能使用了Bootstrap框架，因此进度条的样式已经由Bootstrap提供。如果有自定义需求，可以通过修改`.progress-bar`类的CSS样式来调整进度条的外观。
实现带进度条提示的多视频上传功能需要结合HTML、CSS和JavaScript，通过监听文件输入元素的`change`事件，使用`FormData`和异步请求（如`XMLHttpRequest`或`fetch`）来上传文件，并实时更新进度条的状态。
