js 大文件上传

// 使用 HTML 和 JavaScript 实现大文件上传

// HTML 部分
/*
<form id="uploadForm">
  <input type="file" id="fileInput" />
  <button type="submit">上传</button>
</form>
<div id="progressBar"></div>
*/

// JavaScript 部分
document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择一个文件');
        return;
    }

    // 创建一个 FormData 对象来存储文件数据
    const formData = new FormData();
    formData.append('file', file);

    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    // 设置进度事件监听器
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            document.getElementById('progressBar').innerText = `上传进度: ${percentComplete.toFixed(2)}%`;
        }
    };

    // 设置完成事件监听器
    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('文件上传成功');
        } else {
            alert('文件上传失败');
        }
    };

    // 发送请求
    xhr.send(formData);
});

解释说明

1. HTML 部分:

   • 使用 <form> 标签创建一个表单，包含一个文件输入框 (<input type="file">) 和一个提交按钮。
   • 还有一个用于显示上传进度的 <div>。

2. JavaScript 部分:

   • 监听表单的 submit 事件，阻止默认提交行为。
   • 获取用户选择的文件，并检查是否选择了文件。
   • 使用 FormData 对象将文件数据封装起来。
   • 使用 XMLHttpRequest 对象发送 POST 请求到服务器端的 /upload 路由。
   • 监听 xhr.upload.onprogress 事件以获取上传进度，并更新页面上的进度条。
   • 监听 xhr.onload 事件以处理上传完成后的响应，根据状态码判断上传是否成功并给出相应提示。

通过这种方式，可以实现大文件的上传，并实时显示上传进度。