如何基于现有jQuery代码结合AJAX与PHP实现文件上传？

现有前端代码的核心配置已经匹配FormData传参要求，只需补全前端表单配置、前后端校验逻辑、后端文件存储安全规则，即可实现完整可用的文件上传功能。

前端表单补全 #

基础表单属性配置 #

需要和现有JS逻辑匹配的表单结构，必须开启multipart/form-data编码模式，对应配置如下：

• 给<form>标签添加enctype="multipart/form-data"属性，确保文件内容可以被正确编码传输
• 表单id保持和JS选择器一致的form
• 文件选择输入框必须设置name属性，否则FormData不会采集该字段内容
• 可通过accept属性直接限制可选文件类型，减少无效选择

示例表单结构：

<form id="form" enctype="multipart/form-data">
  <div>
    <label>文件备注：</label>
    <input type="text" name="file_remark" placeholder="选填">
  </div>
  <div>
    <label>上传文件：</label>
    <input type="file" name="upfile" accept=".jpg,.png,.pdf">
  </div>
  <button type="submit">提交上传</button>
</form>

现有JS逻辑补全 #

原有AJAX的processData: false、contentType: false是FormData传输的核心配置，不能修改。在此基础上补充前置校验、重复提交拦截、结果解析逻辑，补全后的代码：

$(document).ready(function() {
  $('#form').submit(function(e) {
    e.preventDefault();
    const formEl = this;
    // 前置校验：检查是否选择了文件
    const fileInput = formEl.querySelector('input[type="file"]');
    if (fileInput.files.length === 0) {
      alert('请选择要上传的文件');
      return;
    }
    // 前端预校验文件大小，减少无效请求
    if (fileInput.files[0].size > 2 * 1024 * 1024) {
      alert('文件大小不能超过2M');
      return;
    }

    const formData = new FormData(formEl);
    const submitBtn = formEl.querySelector('button[type="submit"]');
    submitBtn.disabled = true; // 禁用按钮防止重复提交

    $.ajax({
      url: 'functions.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      cache: false,
      timeout: 120000, // 大文件上传设置2分钟超时
      success: function(res) {
        try {
          const result = JSON.parse(res);
          if (result.code === 200) {
            alert(`上传成功，文件地址：${result.file_path}`);
          } else {
            alert(`上传失败：${result.msg}`);
          }
        } catch (err) {
          alert('服务器返回格式异常');
        }
      },
      error: function() {
        alert('网络异常，上传失败');
      },
      complete: function() {
        submitBtn.disabled = false;
      }
    });
  });
});

后端PHP接收与安全存储 #

PHP环境下上传文件通过$_FILES超全局变量接收，而非$_POST，完整的functions.php逻辑包含请求校验、合法性检查、安全存储规则，代码如下：

<?php
// 仅允许POST请求访问，防止直接打开接口
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(403);
  exit('非法请求');
}

// 上传规则配置
$allowMimeMap = [
  'image/jpeg' => 'jpg',
  'image/png' => 'png',
  'application/pdf' => 'pdf'
];
$maxFileSize = 2 * 1024 * 1024; // 限制单文件最大2M
$uploadRoot = __DIR__ . '/uploads/'; // 建议将存储目录设置在Web根目录外，避免脚本被解析

// 自动创建上传目录
if (!file_exists($uploadRoot)) {
  mkdir($uploadRoot, 0755, true);
}

// 检查文件上传错误码
$uploadFile = $_FILES['upfile'] ?? null;
if (!$uploadFile || $uploadFile['error'] !== UPLOAD_ERR_OK) {
  $errorMap = [
    UPLOAD_ERR_INI_SIZE => '文件大小超出服务器限制',
    UPLOAD_ERR_FORM_SIZE => '文件大小超出表单限制',
    UPLOAD_ERR_PARTIAL => '文件未完成上传',
    UPLOAD_ERR_NO_FILE => '未选择上传文件',
    UPLOAD_ERR_NO_TMP_DIR => '服务器临时目录缺失',
  ];
  $errMsg = $errorMap[$uploadFile['error']] ?? '未知上传错误';
  json_response(400, $errMsg);
}

// 校验文件实际大小
if ($uploadFile['size'] > $maxFileSize) {
  json_response(400, '文件大小不能超过2M');
}

// 读取文件真实MIME类型，防止伪造后缀上传恶意文件
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$realMime = finfo_file($finfo, $uploadFile['tmp_name']);
finfo_close($finfo);

if (!isset($allowMimeMap[$realMime])) {
  json_response(400, '不支持的文件类型');
}
$fileExt = $allowMimeMap[$realMime];

// 生成随机存储文件名，防止文件名重复、路径穿越风险
$saveFileName = uniqid('upload_', true) . '.' . $fileExt;
$saveFullPath = rtrim($uploadRoot, '/') . '/' . $saveFileName;

// 移动临时文件到存储目录，move_uploaded_file自带上传来源校验，比copy更安全
if (!move_uploaded_file($uploadFile['tmp_name'], $saveFullPath)) {
  json_response(500, '文件存储失败');
}

// 上传成功返回结果，对外仅暴露Web可访问的相对路径，不泄露服务器本地绝对路径
json_response(200, '上传成功', '/uploads/' . $saveFileName);

/**
 * 统一JSON返回方法
 */
function json_response(int $code, string $msg, string $filePath = '') {
  header('Content-Type: application/json; charset=utf-8');
  echo json_encode([
    'code' => $code,
    'msg' => $msg,
    'file_path' => $filePath
  ], JSON_UNESCAPED_UNICODE);
  exit;
}

常见踩坑点说明 #

• 禁止修改AJAX中的processData和contentType为默认值，否则jQuery会将FormData序列化为字符串，导致文件内容无法正常传输
• 后端接收不到文件时，优先检查php.ini中post_max_size、upload_tmp_dir的配置，post_max_size是整个POST请求的大小上限，优先级高于单文件上传限制
• 安全加固：给上传目录配置禁止执行PHP脚本的规则，防止攻击者上传恶意脚本获取服务器权限
• 大文件上传时适当调整PHP的max_execution_time和AJAX超时时间，避免请求中途断开

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