AJAX 提供了一种灵活的方法来创建 HTTP 请求,该请求会将文件上传到服务器。我们可以使用 FormData 对象在请求中发送单个或多个文件。让我们借助以下示例来讨论这个概念 -
示例 - 上传单个文件
在以下示例中,我们将使用 XMLHttpRequest 上传单个文件。因此,首先我们创建一个简单的表单,其中包含文件上传按钮和提交按钮。现在我们编写 JavaScript,在其中获取 form 元素并创建一个事件,该事件在我们单击上传文件按钮时触发。在这种情况下,我们将上传的文件添加到 FormData 对象,然后创建一个 XMLHttpRequest 对象,该对象将使用 FormData 对象将文件发送到服务器并处理服务器返回的响应。
输出
示例 − 上传多个文件
在以下示例中,我们将使用 XMLHttpRequest 上传多个文件。这里我们从 DOM 中的系统中选择两个属性为 file 的文件。然后我们将输入文件添加到数组中。然后我们创建一个 FormData 对象并将输入文件附加到该对象。然后我们创建一个 XMLHttpRequest 对象,该对象将使用 FormData 对象的文件发送到服务器并处理服务器返回的响应。
输出
结论
这就是我们在 XMLHttpRequest 的帮助下将文件上传到给定 URL 的方法。在这里,我们可以上传任何类型的文件,例如 jpg、pdf、word 等,也可以上传任意数量的文件,例如一次上传一个文件或一次上传多个文件。现在在下一篇文章中,我们将学习如何使用 XMLHttpRequest 创建一个 FormData 对象。