在开发 web 应用程序过程中，经常需要上传文件。而 ajax 可以实现无需刷新页面即可向服务器发送请求，这在上传文件方面也有很大的用武之地。然而，由于 ajax 默认情况下只支持传输字符串参数，因此要实现文件的上传，我们需要借助额外的技巧和工具。本文将介绍如何使用 ajax 传输文件参数，并通过举例说明其使用方法及原理。假设我们正在开发一个简单的上传图片的功能。用户可以选择图片文件并将其上传到服务器。在传统的表单提交方式中，我们可以使用 input 标签的 type 属性设置为 "file" 来创建一个文件选择框，然后通过表单的提交将文件发送到服务器。然而，在 ajax 中，我们不能直接传递文件参数，因此我们需要通过 FormData 对象来处理。首先，我们需要在 HTML 中创建一个文件选择框，并为其添加一个 id，以便在 JavaScript 中进行操作：

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

接下来，我们需要编写 JavaScript 代码来处理文件上传。首先，我们需要获取用户选择的文件，并将其存储在一个变量中：

var fileInput = document.getElementById("fileInput");var file = fileInput.files[0];

在上述代码中，我们通过使用getElementById()方法获取了 fileInput 元素，并使用 files 属性获取用户选择的文件列表。由于我们只允许用户选择一个文件，所以我们只取第一个文件对象。接下来，我们创建一个新的 FormData 对象，并将文件参数添加到其中：

var formData = new FormData();formData.append("file", file);

在上述代码中，我们使用 append() 方法将文件参数添加到 formData 对象中。第一个参数是参数的名称，这里我们将其设置为 "file"。第二个参数是要添加的文件对象。接下来，我们可以使用 XMLHttpRequest 对象来发送 ajax 请求，并将 formData 作为参数传递给服务器。以下是一个完整的例子：

var fileInput = document.getElementById("fileInput");var file = fileInput.files[0];var formData = new FormData();formData.append("file", file);var xhr = new XMLHttpRequest();xhr.open("POST", "upload.php", true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 上传成功，进行相关处理}};xhr.send(formData);

在上述代码中，我们打开了一个 POST 请求，将文件上传到 upload.php 文件。我们还监听了 XMLHttpRequest 对象的 readyState 和 status，以便在服务器响应完成后进行相关处理。总结起来，通过使用 FormData 对象，我们可以在 ajax 中传输文件参数。我们首先创建一个 FormData 对象，并将文件参数添加到其中。然后，我们使用 XMLHttpRequest 对象发送请求，并将 FormData 对象作为参数传递给服务器。通过这样的方式，我们可以实现在不刷新页面的情况下上传文件，并且可以根据服务器的响应结果进行相关处理。