如何使用jQuery修改代码实现表单文件上传功能？

现有代码的问题 #

你当前的JS代码存在两个关键错误：

• 错误地从按钮元素（$(this)）获取文件，按钮没有文件值，应该定位到input[type="file"]元素
• 使用val('CAR_Logo')是给元素设置值，而非获取文件内容，文件需要通过files属性获取

修正后的完整实现 #

1. 完善表单结构（可选但推荐）

给表单添加form标签，便于逻辑管理：

<form id="carForm">
  <input type="file" name="CAR_Logo" id="CAR_Logo">
  <button type="button" data-action="save" data-name="Africa">Save</button>
</form>

2. 修改JS代码实现文件上传

$('[data-action="save"]').click(function(e) {
  // 获取按钮上的CAR_Name
  const CAR_Name = $(this).data('name');
  // 获取文件输入元素
  const fileInput = $('input[name="CAR_Logo"]')[0];
  // 获取选中的文件
  const CAR_Logo = fileInput.files[0];

  // 如果没有选择文件，提示用户
  if (!CAR_Logo) {
    alert('请选择要上传的文件');
    return;
  }

  // 创建FormData对象，用于封装表单数据（包括文件）
  const formData = new FormData();
  formData.append('CAR_Name', CAR_Name);
  formData.append('CAR_Logo', CAR_Logo);

  // 发送AJAX请求到后端接口
  $.ajax({
    url: '/你的上传接口地址', // 替换成实际的后端上传接口
    type: 'POST',
    data: formData,
    // 这两个参数必须设置，否则文件无法正确上传
    processData: false,
    contentType: false,
    success: function(response) {
      console.log('上传成功', response);
      // 上传成功后的逻辑，比如提示用户
      alert('文件上传成功');
    },
    error: function(xhr, status, error) {
      console.error('上传失败', error);
      alert('文件上传失败，请重试');
    }
  });
});

关键说明 #

• FormData是专门用于处理包含文件的表单数据的对象，能正确封装文件流
• processData: false告诉jQuery不要自动处理FormData数据
• contentType: false让浏览器自动设置正确的Content-Type（包含边界信息，用于区分不同的表单数据）
• 后端需要对应处理multipart/form-data类型的请求，接收CAR_Name和CAR_Logo参数

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