html 监听并拦截选择文件事件并

实现预览或上传文件

在 HTML 中，可以使用 <input type="file"> 元素创建一个文件选择框。当用户选择了一个文件后，可以通过监听 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);
``