How to use FormData for AJAX file upload?

使用 FormData 和 AJAX 上传文件的基本步骤：

1. 创建一个 HTML 表单：首先，你需要一个 HTML 表单，让用户可以选择文件。

   html
   <form id="fileUploadForm">
       <input type="file" id="fileInput" name="file" />
       <button type="button" onclick="uploadFile()">上传文件</button>
   </form>

2. 构建 FormData 对象：在 JavaScript 中，当用户选择文件后，你可以通过 FormData 对象来收集文件数据。

   javascript
   function uploadFile() {
       var fileInput = document.getElementById('fileInput');
       var file = fileInput.files[0];
       var formData = new FormData();
       formData.append('file', file);
   }

   这里，FormData 的 append 方法用来添加文件，第一个参数是键（对应服务器端接收文件的字段名），第二个参数是文件本身。

3. 发送 AJAX 请求：最后，使用 AJAX（比如 XMLHttpRequest 或者更现代的 Fetch API）来异步上传文件。

   使用 XMLHttpRequest：

   javascript
   function uploadFile() {
       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', true);
   
       xhr.onload = function () {
           if (xhr.status === 200) {
               alert('文件上传成功');
           } else {
               alert('文件上传失败');
           }
       };
   
       xhr.send(formData);
   }

   使用 Fetch API：

   javascript
   function uploadFile() {
       var fileInput = document.getElementById('fileInput');
       var file = fileInput.files[0];
       var formData = new FormData();
       formData.append('file', file);
   
       fetch('/upload', {
           method: 'POST',
           body: formData
       })
       .then(response => response.json())
       .then(data => console.log('成功:', data))
       .catch(error => console.error('错误:', error));
   }

示例说明：

• HTML 表单 允许用户选择要上传的文件。
• JavaScript 创建 FormData 对象并通过 append 方法添加了文件数据。
• 使用 AJAX （无论是 XMLHttpRequest 还是 Fetch API），我们发送了一个 POST 请求到服务器的 '/upload' 路径。这个请求中包含了用户选中的文件数据。

使用这种方法可以实现无需刷新页面的文件上传，提升用户体验。