无法通过JS POST请求将HTML表单中的CSV文件数据传递到PHP端如何解决？

错误原因 #

常规$.post默认使用application/x-www-form-urlencoded格式传递参数，仅支持文本键值对传输，无法处理二进制文件数据。传输文件必须使用multipart/form-data格式，配合FormData对象实现和原生表单提交一致的效果。

可直接使用的代码 #

$('#btnget').click(function() {
  getResponse_insert();
});

function getResponse_insert() {
  // 校验是否已选择文件
  if($('#filename')[0].files.length === 0) {
    alert('请先选择要上传的CSV文件');
    return;
  }
  // 初始化FormData对象存储参数
  let formData = new FormData();
  // 添加下拉框参数
  formData.append('name', $('#drop').val());
  // 添加文件参数
  formData.append('filename', $('#filename')[0].files[0]);

  $.ajax({
    url: 'update.php',
    type: 'POST',
    data: formData,
    // 必须添加以下两个配置，避免jQuery自动处理数据导致格式出错
    processData: false,
    contentType: false,
    success: function() {
      alert("Success!");
    },
    error: function() {
      alert("Fail");
    }
  });
}

配置说明 #

• processData: false：禁用jQuery对提交数据的自动序列化处理，保留FormData的原始二进制格式
• contentType: false：禁用jQuery自动设置请求头Content-Type，由浏览器自动生成带边界标识的multipart/form-data请求头，格式和原生表单提交完全一致

兼容说明 #

PHP端接收逻辑不需要做任何修改，和原生表单提交的接收方式完全相同：

• 下拉框取值：$_POST['name']
• 文件信息取值：$_FILES['filename']

原有方案失效原因 #

• 方案1直接传递DOM节点，无法被序列化传输
• 方案2仅获取了本地文件路径字符串，不是文件本身
• 方案3仅获取了文件名字符串，不包含文件二进制内容

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