如何通过jQuery结合AJAX实现文件上传至指定接口？

咱们一步步来解决这个问题，你的代码里有几个关键问题导致文件无法正确上传，我会逐一说明并给出修正后的完整代码：

问题分析 #

1. 文件输入框缺少name属性：后端接口期望接收名为file的参数，但你的<input type="file">没有设置name="file"，FormData无法自动识别这个文件字段。
2. FormData被错误包装：你把FormData对象放到了{file: file}里传递，这会破坏FormData的结构，导致服务器无法解析文件内容。
3. 表单结构不合理：提交按钮放在<label>内部，点击label时会同时触发文件选择框和提交按钮的事件，容易引发意外行为。
4. 事件绑定不够可靠：绑定按钮的click事件不如绑定表单的submit事件，后者能处理用户按回车提交的场景。

修正后的HTML代码 #

<form id="fileUploadForm">
  <label class="btn-bs-file btnAddFile btn btn-lg btn-primary">
    <span class="fa fa-plus"></span>
    <span>Add New File</span>
    <!-- 添加name="file"，匹配后端接口的参数名 -->
    <input type="file" id="fileInputUpload" name="file" />
  </label>
  <!-- 将提交按钮移到label外部，避免事件冲突 -->
  <input type="submit" value="Submit" id="btnSubmit" class="btn btn-lg btn-success mt-2"/>
</form>

修正后的jQuery代码 #

$("#fileUploadForm").submit(function (event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 获取当前表单元素（用this更简洁）
  const form = this;
  // 创建FormData对象，自动包含所有带name属性的表单元素
  const formData = new FormData(form);
  
  // 如需添加额外字段，直接append即可
  formData.append("CustomField", "This is some extra data, testing");
  
  // 禁用提交按钮，防止重复提交
  $("#btnSubmit").prop("disabled", true);
  
  $.ajax({
    type: "POST",
    url: "/files/uploads",
    data: formData, // 直接传递FormData对象，不要包装
    processData: false, // 必须设为false，禁止jQuery解析FormData
    contentType: false, // 必须设为false，让浏览器自动设置正确的Content-Type
    cache: false,
    timeout: 600000,
    success: function (data) {
      // 成功后的处理逻辑
      alert("文件上传成功！");
      form.reset(); // 重置表单
      $("#btnSubmit").prop("disabled", false); // 恢复按钮可用
    },
    error: function (e) {
      // 错误处理逻辑
      const errorMsg = e.responseText || "上传失败，请稍后重试";
      alert(`文件上传失败：${errorMsg}`);
      $("#btnSubmit").prop("disabled", false); // 恢复按钮可用
    }
  });
});

关键修正说明 #

• name属性的重要性：后端接口通过参数名file接收文件，所以文件输入框必须设置name="file"，FormData会以此为键名封装文件数据。
• 直接传递FormData：AJAX的data选项直接传入FormData对象，不要用对象包装，否则jQuery会将其转换为字符串，导致文件无法正确上传。
• 表单submit事件：相比按钮click事件，表单submit事件能覆盖更多提交场景（比如用户按回车），交互更完整。
• 按钮状态管理：在请求发起时禁用按钮，请求结束后恢复，避免用户重复提交。

额外提示 #

如果需要支持多文件上传，只需给文件输入框添加multiple属性：

<input type="file" id="fileInputUpload" name="file" multiple />

同时后端要做好多文件的接收处理。

内容的提问来源于stack exchange，提问作者andrew