基于PHP MySQL的Ajax多图上传（带编辑删除）：需添加图片缩放功能

嘿，这个需求其实得前后端双管齐下才稳妥——前端提前处理能帮你省服务器带宽，还能给用户即时反馈；后端必须兜底，防止有人绕过前端直接传不符合要求的图。我给你拆解成两部分来写具体实现：

一、前端JavaScript层面处理（提升用户体验） #

在用户选择文件后，直接在浏览器里判断图片高度，超过600px就用Canvas缩放，再上传处理后的图片。这样能避免大图片浪费带宽，还能让用户立刻知道图片被处理了。

// 假设你的文件选择器ID是fileInput，替换成你实际的ID
document.getElementById('fileInput').addEventListener('change', handleFileUpload);

function handleFileUpload(e) {
  const files = e.target.files;
  if (!files.length) return;

  // 遍历选中的每个图片
  [...files].forEach(file => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = new Image();
      img.onload = function() {
        if (img.height > 600) {
          // 计算缩放比例，保持宽高比不变
          const scaleRatio = 600 / img.height;
          const newWidth = Math.round(img.width * scaleRatio);
          const newHeight = 600;

          // 创建Canvas用于绘制缩放后的图片
          const canvas = document.createElement('canvas');
          canvas.width = newWidth;
          canvas.height = newHeight;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, newWidth, newHeight);

          // 将Canvas转成Blob格式，准备上传
          canvas.toBlob(function(blob) {
            // 构建FormData，替换原文件为缩放后的Blob
            const formData = new FormData();
            // 保留原文件名，方便后续处理
            formData.append('images[]', blob, file.name);

            // 这里替换成你原来的Ajax上传逻辑
            fetch('upload.php', {
              method: 'POST',
              body: formData
            })
            .then(res => res.json())
            .then(data => {
              console.log('上传成功:', data);
              // 这里可以添加更新页面预览的逻辑
            })
            .catch(err => console.error('上传失败:', err));
          }, 'image/jpeg', 0.9); // 0.9是图片质量，范围0-1，按需调整
        } else {
          // 图片高度符合要求，直接上传原文件
          const formData = new FormData();
          formData.append('images[]', file);
          // 调用你原有的上传函数即可
          uploadOriginalFile(formData);
        }
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
}

// 封装原文件上传函数（复用你原来的Ajax逻辑）
function uploadOriginalFile(formData) {
  // 这里复制你原来的上传代码即可
}

二、后端upload.php层面处理（安全兜底） #

前端处理可以被绕过（比如用户禁用JS，或者直接构造HTTP请求上传），所以必须在后端再做一次验证和处理，确保所有存储的图片都符合高度要求。这里用PHP的GD库实现（大部分服务器都默认支持）：

// 假设你的上传目录是uploads，确保目录有写入权限
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) mkdir($uploadDir, 0755);

// 遍历上传的图片数组（多图上传的情况）
if (isset($_FILES['images']) && $_FILES['images']['error'][0] === UPLOAD_ERR_OK) {
  foreach ($_FILES['images']['tmp_name'] as $key => $tmpName) {
    $fileName = $_FILES['images']['name'][$key];
    $fileType = $_FILES['images']['type'][$key];
    $fileSize = $_FILES['images']['size'][$key];

    // 先验证文件类型（可选，但建议做）
    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($fileType, $allowedTypes)) {
      echo json_encode(['status' => 'error', 'msg' => '仅支持JPG/PNG/GIF格式']);
      continue;
    }

    // 获取图片原始尺寸
    list($originalWidth, $originalHeight) = getimagesize($tmpName);
    $maxHeight = 600;

    if ($originalHeight > $maxHeight) {
      // 计算缩放比例
      $scaleRatio = $maxHeight / $originalHeight;
      $newWidth = (int)($originalWidth * $scaleRatio);
      $newHeight = $maxHeight;

      // 根据图片类型创建原始图片资源
      switch ($fileType) {
        case 'image/jpeg':
          $srcImage = imagecreatefromjpeg($tmpName);
          break;
        case 'image/png':
          $srcImage = imagecreatefrompng($tmpName);
          break;
        case 'image/gif':
          $srcImage = imagecreatefromgif($tmpName);
          break;
        default:
          continue;
      }

      // 创建目标图片资源，处理PNG/GIF的透明度
      $dstImage = imagecreatetruecolor($newWidth, $newHeight);
      if ($fileType === 'image/png' || $fileType === 'image/gif') {
        imagealphablending($dstImage, false);
        imagesavealpha($dstImage, true);
        $transparentColor = imagecolorallocatealpha($dstImage, 255, 255, 255, 127);
        imagefill($dstImage, 0, 0, $transparentColor);
      }

      // 执行缩放（imagecopyresampled比imagecopyresized画质更好）
      imagecopyresampled(
        $dstImage, $srcImage,
        0, 0, 0, 0,
        $newWidth, $newHeight,
        $originalWidth, $originalHeight
      );

      // 保存缩放后的图片到服务器
      switch ($fileType) {
        case 'image/jpeg':
          imagejpeg($dstImage, $uploadDir . $fileName, 90); // 90是质量
          break;
        case 'image/png':
          imagepng($dstImage, $uploadDir . $fileName);
          break;
        case 'image/gif':
          imagegif($dstImage, $uploadDir . $fileName);
          break;
      }

      // 释放图片资源，避免内存泄漏
      imagedestroy($srcImage);
      imagedestroy($dstImage);
    } else {
      // 图片高度符合要求，直接移动到上传目录
      move_uploaded_file($tmpName, $uploadDir . $fileName);
    }
  }

  echo json_encode(['status' => 'success', 'msg' => '上传完成']);
} else {
  echo json_encode(['status' => 'error', 'msg' => '请选择有效的图片文件']);
}

最后提醒 #

• 前端处理是为了用户体验和减少服务器压力，后端处理是为了数据安全，两者缺一不可。
• 记得给uploads目录设置正确的写入权限（一般是0755）。
• 可以根据需求调整图片质量（前端的0.9和后端的90），平衡画质和文件大小。

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