js 文件上传

// HTML 部分
<form id="uploadForm">
  <input type="file" id="fileInput" name="file" />
  <button type="submit">上传</button>
</form>
<div id="progress"></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;
  }

  const formData = new FormData();
  formData.append('file', file);

  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('progress').innerText = `上传进度: ${percentComplete.toFixed(2)}%`;
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('文件上传成功');
    } else {
      alert('文件上传失败');
    }
  };

  xhr.onerror = function() {
    alert('上传过程中发生错误');
  };

  xhr.send(formData);
});

解释说明：

1. HTML 部分：创建了一个简单的文件上传表单，包含一个文件选择输入框和一个提交按钮。还有一个用于显示上传进度的 div。
2. JavaScript 部分：
   • 监听表单的提交事件，并阻止默认的表单提交行为。
   • 获取用户选择的文件，并检查是否选择了文件。
   • 使用 FormData 对象将文件数据封装为可以发送的形式。
   • 使用 XMLHttpRequest 发送 POST 请求到服务器端的 /upload 路径。
   • 在上传过程中，通过 xhr.upload.onprogress 事件监听上传进度，并更新页面上的进度信息。
   • 根据服务器响应的状态码判断上传是否成功，并给出相应的提示信息。