HTML 文件选择框监听与拦截：预览和上传文件

在 HTML 中，可以使用 `` 元素创建一个文件选择框。当用户选择了一个文件后，可以通过监听 `change` 事件来获取文件信息。

<input type='file' id='fileInput'>

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  // 处理文件
});

可以通过 `FileReader` 对象来读取文件内容，并进行预览或上传操作。

const fileReader = new FileReader();

fileReader.addEventListener('load', (event) => {
  const fileContent = event.target.result;
  // 处理文件内容
});

fileReader.readAsText(file); // 以文本形式读取文件内容

对于文件上传操作，可以使用 `XMLHttpRequest` 或 `fetch` 发送请求。需要注意的是，由于浏览器的安全限制，只有用户主动触发了文件选择框并选择了文件，才能进行上传操作。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(file);