js如何做视频上传进度

在JavaScript中实现视频上传进度，可以使用XMLHttpRequest对象、FormData对象和ProgressEvent事件。 这些技术允许我们以较高的灵活性和精度来监控和显示上传进度。在这篇文章中，我将详细介绍如何实现视频上传进度，并解释每一步的具体操作。

XMLHttpRequest对象 是JavaScript中用于与服务器进行交互的接口，它允许在不重新加载页面的情况下从服务器请求数据。FormData对象 允许我们以编程方式构建表单数据集，并将其发送到服务器。ProgressEvent事件 是一个事件接口，它提供了有关进度的详细信息，例如上传的字节数和总字节数。

一、创建HTML表单

首先，我们需要一个HTML表单来选择视频文件并开始上传。以下是一个简单的HTML表单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Upload with Progress</title>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="fileInput" accept="video/*">
        <button type="button" onclick="uploadFile()">Upload</button>
    </form>
    <progress id="uploadProgress" value="0" max="100"></progress>
    <span id="uploadStatus"></span>
    <script src="upload.js"></script>
</body>
</html>

二、JavaScript代码

接下来，我们编写JavaScript代码来处理文件上传并显示进度。

// 获取表单元素
const fileInput = document.getElementById('fileInput');
const uploadProgress = document.getElementById('uploadProgress');
const uploadStatus = document.getElementById('uploadStatus');
function uploadFile() {
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a video file to upload.');
        return;
    }
    const formData = new FormData();
    formData.append('file', file);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    // 监听上传进度事件
    xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            uploadProgress.value = percentComplete;
            uploadStatus.textContent = `Uploading: ${Math.round(percentComplete)}%`;
        }
    });
    // 监听上传完成事件
    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            uploadStatus.textContent = 'Upload complete!';
        } else {
            uploadStatus.textContent = `Upload failed: ${xhr.statusText}`;
        }
    });
    // 监听上传错误事件
    xhr.addEventListener('error', () => {
        uploadStatus.textContent = 'Upload failed: An error occurred.';
    });
    // 发送表单数据
    xhr.send(formData);
}

三、处理服务器端上传

为了使上述JavaScript代码有效，我们需要处理服务器端上传。这取决于所使用的服务器技术栈。以下是一个基于Node.js和Express的示例：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
    if (req.file) {
        res.status(200).send('File uploaded successfully.');
    } else {
        res.status(400).send('File upload failed.');
    }
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

四、优化用户体验

为了更好的用户体验，我们可以在上传过程中添加一些额外的功能，比如取消上传、显示剩余时间等。

1、取消上传

我们可以使用XMLHttpRequest的abort()方法来取消上传：

let xhr;
function uploadFile() {
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a video file to upload.');
        return;
    }
    const formData = new FormData();
    formData.append('file', file);
    xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            uploadProgress.value = percentComplete;
            uploadStatus.textContent = `Uploading: ${Math.round(percentComplete)}%`;
        }
    });
    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            uploadStatus.textContent = 'Upload complete!';
        } else {
            uploadStatus.textContent = `Upload failed: ${xhr.statusText}`;
        }
    });
    xhr.addEventListener('error', () => {
        uploadStatus.textContent = 'Upload failed: An error occurred.';
    });
    xhr.send(formData);
}
function cancelUpload() {
    if (xhr) {
        xhr.abort();
        uploadStatus.textContent = 'Upload cancelled.';
    }
}

我们还需要在HTML表单中添加一个取消按钮：

<button type="button" onclick="cancelUpload()">Cancel</button>

2、显示剩余时间

为了显示剩余时间，我们可以在progress事件中计算上传速度，并估算剩余时间：

let startTime;
function uploadFile() {
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a video file to upload.');
        return;
    }
    const formData = new FormData();
    formData.append('file', file);
    xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    startTime = Date.now();
    xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            uploadProgress.value = percentComplete;
            const elapsedTime = (Date.now() - startTime) / 1000; // 秒
            const uploadSpeed = event.loaded / elapsedTime; // 字节/秒
            const remainingTime = (event.total - event.loaded) / uploadSpeed; // 秒
            uploadStatus.textContent = `Uploading: ${Math.round(percentComplete)}% - Remaining time: ${Math.round(remainingTime)} seconds`;
        }
    });
    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            uploadStatus.textContent = 'Upload complete!';
        } else {
            uploadStatus.textContent = `Upload failed: ${xhr.statusText}`;
        }
    });
    xhr.addEventListener('error', () => {
        uploadStatus.textContent = 'Upload failed: An error occurred.';
    });
    xhr.send(formData);
}

五、总结

通过以上步骤，我们详细介绍了如何在JavaScript中实现视频上传进度，包括使用XMLHttpRequest对象、FormData对象和ProgressEvent事件。我们还展示了如何处理服务器端上传，并优化用户体验，包括取消上传和显示剩余时间。通过这些技术，您可以创建一个功能齐全且用户友好的文件上传系统。

在实际项目中，您还可以根据需要进一步优化和扩展这些功能，例如添加多文件上传、处理不同的文件类型等。希望这篇文章对您有所帮助！