PHP多图片上传问题：单选仅传1张、批量选仅显1张

问题出在哪 #

1. 逐个选图只能传1张：默认的文件输入框每次选新图会覆盖之前的选择，提交时就只剩最后选中的那张。
2. 批量选图只显示1张：预览逻辑仅处理了选中文件列表的第一个元素，没循环遍历所有文件，所以只渲染了一张预览图。

前端代码修改方案 #

1. HTML调整 #

给文件输入框加multiple属性（支持批量选图），同时确保表单的enctype="multipart/form-data"（这个属性是文件上传的必要条件，确认已添加）：

<form id="annonceForm" method="post" action="AddAnnonce.php" enctype="multipart/form-data">
  <input type="file" id="imageInput" accept="image/*" multiple>
  <div id="display_img"></div>
  <button type="submit" id="createBtn">CREATE</button>
</form>

2. JavaScript逻辑重构 #

需要用一个全局数组保存所有选中的图片，每次选新图就追加进去，再循环生成所有预览图；提交时把数组里的图片都塞进FormData传给后端：

// 存储所有选中的图片文件
let selectedImages = [];
const imageInput = document.getElementById('imageInput');
const displayImgDiv = document.getElementById('display_img');
const annonceForm = document.getElementById('annonceForm');

// 文件选择事件处理
imageInput.addEventListener('change', function(e) {
  const newFiles = Array.from(e.target.files);
  
  // 校验文件大小（可选，限制单张5MB）
  const maxSize = 5 * 1024 * 1024;
  const tooBigFiles = newFiles.filter(file => file.size > maxSize);
  if(tooBigFiles.length > 0) {
    alert(`有${tooBigFiles.length}张图片超过5MB限制，请重新选择`);
    return;
  }
  
  // 校验文件格式（可选，仅允许常见图片格式）
  const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
  const invalidFiles = newFiles.filter(file => !validTypes.includes(file.type));
  if(invalidFiles.length > 0) {
    alert('仅支持JPG/PNG/GIF格式的图片');
    return;
  }
  
  // 把新选的图片追加到数组，不覆盖旧数据
  selectedImages = [...selectedImages, ...newFiles];
  // 重新渲染所有预览图
  renderAllPreviews();
  // 重置输入框，避免无法重复选择相同文件
  imageInput.value = '';
});

// 专门渲染预览图的函数
function renderAllPreviews() {
  displayImgDiv.innerHTML = '';
  
  selectedImages.forEach((file, index) => {
    const reader = new FileReader();
    reader.onload = function(event) {
      // 创建图片元素
      const imgElement = document.createElement('img');
      imgElement.src = event.target.result;
      imgElement.style.maxWidth = '200px';
      imgElement.style.margin = '10px';
      
      // 添加删除按钮（可选，方便用户移除图片）
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '删除';
      deleteBtn.addEventListener('click', () => {
        selectedImages.splice(index, 1);
        renderAllPreviews();
      });
      
      // 把图片和按钮放入容器
      const imgContainer = document.createElement('div');
      imgContainer.appendChild(imgElement);
      imgContainer.appendChild(deleteBtn);
      displayImgDiv.appendChild(imgContainer);
    };
    reader.readAsDataURL(file);
  });
}

// 表单提交处理
annonceForm.addEventListener('submit', function(e) {
  e.preventDefault();
  
  // 创建FormData，包含表单所有基础字段
  const formData = new FormData(this);
  
  // 将所有选中的图片添加到FormData，字段名用`images[]`表示数组
  selectedImages.forEach(file => {
    formData.append('images[]', file, file.name);
  });
  
  // 用AJAX提交表单（也可以用原生表单提交，AJAX体验更流畅）
  fetch('AddAnnonce.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    alert('发布成功！');
    // 重置表单和图片列表
    selectedImages = [];
    renderAllPreviews();
    annonceForm.reset();
  })
  .catch(error => {
    console.error('提交失败:', error);
    alert('发布失败，请重试');
  });
});

3. 后端接收调整（按需修改） #

前端传的是images[]数组，后端需要遍历$_FILES['images']处理每一张图片：

// 在AddAnnonce.php中处理图片上传
if(isset($_FILES['images'])) {
  $uploadedPaths = [];
  $images = $_FILES['images'];
  
  // 遍历所有上传的文件
  for($i = 0; $i < count($images['name']); $i++) {
    // 跳过上传出错的文件
    if($images['error'][$i] !== UPLOAD_ERR_OK) continue;
    
    $fileName = $images['name'][$i];
    $tmpFilePath = $images['tmp_name'][$i];
    
    // 生成唯一文件名，避免重名覆盖
    $uniqueFileName = uniqid() . '_' . $fileName;
    $savePath = 'uploads/' . $uniqueFileName; // 确保uploads目录存在且有写入权限
    
    if(move_uploaded_file($tmpFilePath, $savePath)) {
      $uploadedPaths[] = $savePath;
    }
  }
  
  // 将图片路径数组传入add_new_annonce函数，存入数据库
  add_new_annonce(/* 你的其他参数：标题、价格等 */, $uploadedPaths);
}

额外建议 #

• 数据库存储优化：建议存储图片的服务器相对路径而非二进制数据，既节省数据库空间，又能提升图片访问效率。
• 加载状态提示：可以在预览图加载时添加简单的加载动画，提升用户体验。
• 权限控制：确保服务器的uploads目录设置了正确的读写权限，避免文件上传失败。

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