HTML5 FormData 对象结合 Ajax 提交表单与图片上传

准备工作与核心概念

FormData 对象的主要作用是将表单元素（如文本输入、单选框、文件选择等）及其对应的 name 属性和当前值自动组合成一个查询字符串风格的集合。这大大简化了 AJAX 请求中数据的组装工作，尤其是当涉及二进制文件（如图片或文档）传输时，无需手动序列化即可通过 POST 请求发送给服务器。

创建 FormData 对象的两种方式

根据实际需求，可以通过以下两种途径初始化 FormData 实例：

1. 手动添加字段：创建一个空的 FormData 对象，并使用 append() 方法逐个添加键值对。

var formData = new FormData();
formData.append('name', 'fdipzone');
formData.append('gender', 'male');

2. 自动获取 Form 元素数据：如果已经存在一个标准的 HTML <form> 标签，可以直接将该 DOM 元素作为参数传入 FormData 构造函数，它会自动遍历并提取所有具有 name 属性的子元素。

<form name="form1" id="form1">
    <input type="text" name="name" value="fdipzone">
    <input type="text" name="gender" value="male">
</form>

var form = document.getElementById('form1');
var formData = new FormData(form);

Ajax 异步提交关键配置

在使用 jQuery 的 $ajax 方法发送 FormData 时，必须调整默认行为以确保二进制流正确编码：

• processData: false：禁止 jQuery 将 FormData 转换为 URL 编码格式（x-www-form-urlencoded），保持为 multipart/form-data 格式。
• contentType: false：让浏览器自动设置请求头中的 Content-Type，包含必要的 boundary 分隔符，以便后端正确解析文件数据。

完整代码实现

以下是一个完整的 HTML 示例，展示了前端结构与逻辑。页面包含姓名、性别选择和照片上传选项，点击按钮后通过 fsubmit 函数执行异步提交。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>FormData Demo</title>
    <script src="/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
       function fsubmit(){
           // 获取 form1 DOM 对象并包裹进 FormData
           var data = new FormData($('#form1')[0]);
           $ .ajax({
               url: 'server.php', // 指向后端处理脚本
               type: 'POST',
               data: data,
               dataType: 'JSON',
               cache: false,
               processData: false,
               contentType: false
           }).done(function(ret){
               if(ret['isSuccess']){
                   var result = '';
                   result += 'name=' + ret['name'] + '<br>';
                   result += 'gender=' + ret['gender'] + '<br>';
                   result += '<img src="' + ret['photo'] + '" width="100">';
                   $('#result').html(result);
               }else{
                   alert('提交失敗');
               }
           });
           return false; // 阻止默认的表单同步提交行为
       }
    </script>
  </head>
  <body>
    <form name="form1" id="form1">
       <p>name:<input type="text" name="name" ></p>
       <p>gender:<input type="radio" name="gender" value="1">male
        <input type="radio" name="gender" value="2">female</p>
       <p>photo:<input type="file" name="photo" id="photo"></p>
       <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>
    </form>
    <div id="result"></div>
  </body>
</html>

界面效果预期

运行上述代码并在页面中填写内容、选择文件后点击 submit，若提交成功，下方区域会显示回传的文本信息以及缩略图预览。实际交互状态如下所示：

PHP 服务端处理逻辑

对应前端的 server.php 负责接收 POST 请求中的数据。对于普通字段，直接从 $_POST 获取；对于文件，则检查 $_FILES 数组并完成移动临时文件的动作。

<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';

// 获取原文件名后缀，防止重名覆盖
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$response = array();

// 尝试将上传的临时文件移动到指定位置
if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
    $response['isSuccess'] = true;
    $response['name'] = $name;
    $response['gender'] = $gender;
    $response['photo'] = $filename;
}else{
    $response['isSuccess'] = false;
}

// 输出 JSON 格式响应
header('Content-Type: application/json');
echo json_encode($response);
?>

注意事项与风险提示

• 目录权限：确保存放上传文件的目录对运行 PHP 的用户（通常是 www-data 或 nginx）具有写入权限（755 或 777）。
• 文件大小限制：需检查 PHP 配置文件 php.ini 中的 upload_max_filesize 和 post_max_size，确保其值大于待上传的图片大小。
• 安全性：生产环境中不应直接使用原始文件名或未验证的文件类型。建议对文件内容进行 MIME 类型校验，并重命名文件以防止恶意脚本注入或路径穿越攻击。

简要总结

通过结合 HTML5 FormData 与 jQuery AJAX 的特定配置，可以轻松实现非阻断式的复杂表单提交。这一方案不仅提升了用户体验（无页面刷新），还简化了前后端的数据交互逻辑。以上就是 HTML5 FormData 结合 PHP 实现表单与图片异步上传的详细内容，更多关于 web 开发实战的资料请关注本站其它相关文章！