如何使用AJAX发送表单数据和CSV文件且不破坏文件内容？

问题说明 #

需要同时提交普通表单数据和CSV文件，但使用form.serialize()方法时CSV文件被错误格式化，无法正常上传。

问题原因 #

form.serialize() 本质是将表单内的文本类控件转换为URL编码的字符串，不支持处理二进制的文件内容，因此会对CSV文件做错误的格式化处理，导致文件损坏。

解决方案 #

使用浏览器原生 FormData API 收集表单数据，它会自动兼容普通字段和文件字段，不会修改文件本身内容。

1. 原生Fetch用法示例

// 替换为你的表单DOM ID
const form = document.getElementById('targetForm');
// 实例化FormData，自动收集所有表单字段（含文件）
const formData = new FormData(form);

// 可额外追加自定义字段，不需要可删除
// formData.append('customField', '自定义值');

fetch('你的后端接口地址', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(result => console.log('提交成功', result))
.catch(err => console.error('提交失败', err));

2. jQuery AJAX用法示例

const form = document.getElementById('targetForm');
const formData = new FormData(form);

$.ajax({
  url: '你的后端接口地址',
  type: 'POST',
  data: formData,
  // 必须加：禁止jQuery自动序列化处理数据
  processData: false,
  // 必须加：禁止jQuery自动设置Content-Type请求头
  contentType: false,
  success: function (result) {
    console.log('提交成功', result);
  },
  error: function (err) {
    console.error('提交失败', err);
  }
});

注意事项 #

• 不要对FormData做任何序列化操作，直接作为请求body参数传递即可
• 不要手动设置Content-Type: multipart/form-data请求头，浏览器会自动生成带边界符（boundary）的正确请求头，手动设置会导致边界符缺失，后端无法正常解析参数
• 该方案兼容所有现代浏览器，以及IE10及以上版本

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