如何使用 JavaScript 在没有表单的情况下上传文件？

有时候我们在使用 JavaScript 时，需要上传文件，但是又不想使用表单来完成上传。在这种情况下，我们可以使用 XMLHTTPRequest 对象来实现无表单的文件上传。

实现步骤

1. 创建 XMLHttpRequest 对象：

const xhr = new XMLHttpRequest();

2. 创建 FormData 对象：

const formData = new FormData();

3. 通过 append() 方法向 FormData 对象中添加文件：

formData.append("file", fileObject);

这里的 fileObject 是传入的文件对象。

4. 使用 XMLHttpRequest 对象发送请求：

xhr.open("POST", "upload.php", true);
xhr.send(formData);

完整代码

const xhr = new XMLHttpRequest();
const formData = new FormData();
const fileInput = document.getElementById("fileInput");
const fileObject = fileInput.files[0];
formData.append("file", fileObject);
xhr.open("POST", "upload.php", true);
xhr.send(formData);

这段代码中，我们在 HTML 文件中添加了一个 input 元素，用于选择需要上传的文件：

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

当用户选择文件后，我们可以通过 fileInput.files[0] 的方式获取到文件对象。然后将文件对象添加到 FormData 对象中，最后使用 XMLHttpRequest 对象发送请求即可完成文件上传。

注意事项

• 由于浏览器限制，使用 XMLHttpRequest 对象上传文件时无法获取上传进度。
• 如果需要在服务端处理上传的文件，需要在服务端编写相应的代码来接收上传的文件。