如何使用 JavaScript 上传文件

如何设置事件处理程序
假设您有一个如下所示的HTML表单：

File Upload 使用 HTML，要访问用户设备上的文件，我们必须使用带有“文件”的type. 为了创建上传文件的HTTP 请求，我们必须使用一个元素。

在处理 JavaScript 时，第一部分仍然适用。我们仍然需要文件输入来访问设备上的文件。但是浏览器有一个Fetch API，我们可以使用它来发出没有​​表单的 HTTP 请求。

我仍然喜欢包括一个表格，因为：

渐进增强：如果 JavaScript 由于某种原因失败，HTML 表单仍然可以工作。
我很懒惰：表格实际上会让我以后的工作更轻松，正如我们将看到的。
考虑到这一点，为了让 JavaScript 提交此表单，我将设置一个“提交”事件处理程序。

const form = document.querySelector(‘form’);
form.addEventListener(‘submit’, handleSubmit);

/** @param {Event} event */
function handleSubmit(event) {
// The rest of the logic will go here.
}
在本文的其余部分，我们将只关注事件处理函数中的逻辑，handleSubmit.

如何准备 HTTP 请求
在此提交处理程序中，我需要做的第一件事是调用事件的preventDefault方法来阻止浏览器重新加载页面以提交表单。我喜欢将它放在事件处理程序的末尾，这样如果在此函数主体内抛出异常preventDefault，将不会被调用，浏览器将回退到默认行为。

/** &#