如何使用AJAX与jQuery发送包含图片的表单数据？

阿华AIGC实验室

2026-5-15

解决AJAX同时发送表单数据和图片文件的问题

你遇到的问题很常见：serialize()方法只能序列化常规的表单字段（比如文本输入），无法处理文件类型的input元素，所以图片数据没有被包含进来。要同时发送表单数据和文件，我们需要使用HTML5的FormData对象，它专门用来处理包含文件的表单数据。

下面是完整的修改方案：

步骤1：确保表单结构正确

首先检查你的HTML，确保<form>标签有正确的id（你代码里用了#FormClient，所以要确保表单标签包含这个id）：

<form id="FormClient">
  <input type="text" class="form-control" id="Name" name="Name"/> <!-- 最好给文本输入加name属性，方便服务器端接收 -->
  <input type="file" name="imgClient" class="form-control" id="UploadIMG"/>
</form>
<button id="btnSave">Save</button>

注意：文本输入最好加上name属性，否则服务器端可能无法正确接收这个字段的值。

步骤2：修改jQuery AJAX代码

替换原来的serialize()，改用FormData来收集所有表单数据（包括文件），同时调整AJAX的配置项：

$("#btnSave").click(function(e) {
  // 阻止按钮默认的提交行为（如果按钮在表单内，这一步很重要）
  e.preventDefault();
  
  var Url = 'http://localhost/systemm/public/painel/client';
  // 基于表单元素创建FormData对象，自动收集所有字段（包括文件）
  var Dados = new FormData($('#FormClient')[0]);
  
  $.ajax({
    type: 'POST', // 文件上传必须使用POST方法
    url: Url,
    dataType: 'JSON',
    data: Dados,
    // 关键配置：禁止jQuery处理数据和设置Content-Type
    processData: false,
    contentType: false,
    success:function(data){
      if($.isEmptyObject(data.error)) {
        location.reload();
      } else {
        printErrorMsg(data.error);
      }
    },
    error:function(e){
      alert('Ocorreu um erro !');
      console.log(e);
    },
  });
});

关键配置说明

new FormData($('#FormClient')[0])：通过表单DOM元素创建FormData对象，它会自动把表单里的所有字段（包括文件）打包成适合上传的格式。
processData: false：告诉jQuery不要将FormData对象转换成字符串，因为FormData本身就是符合HTTP上传规范的格式。
contentType: false：让浏览器自动生成正确的Content-Type头（值为multipart/form-data），并包含必要的边界标识，这是文件上传的必要条件。