FormData 实现 Ajax 请求上传文件的实例代码

在现代 Web 开发中，实现文件上传是一个常见的需求。使用 FormData 和 Ajax 技术可以提供一种高效、便捷且用户体验良好的文件上传方式。以下是一个详细的实例代码，帮助您理解如何使用 FormData 实现 Ajax 请求上传文件。

我们需要创建一个 HTML 表单，包含一个文件选择输入框和一个提交按钮：

<form id="uploadForm">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="上传文件" id="submitBtn">
</form>

接下来，使用 JavaScript 来处理表单的提交事件：

document.getElementById('submitBtn').addEventListener('click', function(event) {
  event.preventDefault();

  var formData = new FormData();
  var fileInput = document.getElementById('fileToUpload');
  var file = fileInput.files[0];

  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };

  xhr.send(formData);
});

在上述代码中，我们首先阻止了表单的默认提交行为。然后，创建了一个 FormData 对象，并将选择的文件添加到其中。接下来，创建了一个 XMLHttpRequest 对象，使用 POST 方法向指定的 /upload 路径发送请求。在发送请求时，将 FormData 对象作为参数传递。

在服务器端（例如使用 Node.js 和 Express 框架），可以这样处理上传的文件：

const express = require('express');
const multer = require('multer');

const app = express();

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('文件上传成功！');
});

app.listen(3000, () => {
  console.log('服务器运行在 3000 端口');
});

通过以上的实例代码，我们成功地实现了使用 FormData 和 Ajax 请求上传文件的功能。这种方式避免了页面的刷新，提供了更流畅的用户体验，并且可以方便地处理上传文件的后续操作，如保存文件到服务器、验证文件类型和大小等。

FormData 和 Ajax 的结合为 Web 应用中的文件上传提供了一种强大而灵活的解决方案，使开发者能够更好地满足用户的需求和提升应用的性能。