html 实现file 文件上传 通过监听器当文件上传，把文件作为参数传递给后端

HTML 实现文件上传通常涉及到使用 `<input type="file">` 元素让用户选择文件，然后通过 JavaScript 或 AJAX 来处理上传操作。以下是基本步骤：

1. 创建表单输入元素：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileInput" multiple>
  <button type="submit">上传</button>
</form>

这里的 `enctype="multipart/form-data"` 是必需的，因为这是处理二进制文件（如图片、文档等）的形式。

2. 使用 JavaScript 监听文件输入事件：

document.getElementById('fileInput').addEventListener('change', function(event) {
  var files = event.target.files;
  // 在这里处理文件列表
});

这个函数会在用户选择文件后触发，`files` 对象包含了所选文件的信息。

3. 提交文件到后端服务器：

var form = document.getElementById('uploadForm');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  var formData = new FormData(form);
  for (var i = 0; i < files.length; i++) {
    formData.append('file', files[i], files[i].name); // 将文件添加到表单数据
  }

  fetch('/api/upload', {
    method: 'POST',
    body: formData,
    headers: { 'Content-Type': 'multipart/form-data' }
  })
  .then(response => response.json())
  .then(data => console.log('上传成功:', data))
  .catch(error => console.error('上传失败:', error));
});

这里使用了 `fetch()` API 向后端发送 POST 请求，将文件作为formData的一部分上传。