HTML中无法显示多张上传图片 如何获取有效URL并校验上传数量

核心问题说明 #

• 你现有代码仅解构了img.files中的第一个文件，所以即使开启了multiple属性，也只能展示单张图片
• URL.createObjectURL()生成的是本地临时预览URL，仅当前浏览器会话有效，提交到后端时需要用FormData携带原文件对象

功能实现步骤 #

1. 文件校验逻辑 #

支持自定义上传数量上限、允许的图片格式，校验不通过时清空已选文件：

const MAX_UPLOAD_COUNT = 9; // 自定义最大上传数量
const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif']; // 允许的图片格式

校验逻辑示例：

const files = Array.from(img.files);
// 数量校验
if (files.length > MAX_UPLOAD_COUNT) {
  alert(`最多可上传${MAX_UPLOAD_COUNT}张图片，当前选择了${files.length}张`);
  img.value = ''; // 清空已选文件
  return;
}
// 格式校验
const invalidFile = files.find(file => !ALLOWED_IMAGE_TYPES.includes(file.type));
if (invalidFile) {
  alert(`文件【${invalidFile.name}】格式不支持，请上传JPG/PNG/GIF格式的图片`);
  img.value = '';
  return;
}

2. 多图片预览URL生成 #

URL.createObjectURL()可以生成有效的本地预览URL，注意不再使用时要调用URL.revokeObjectURL()释放内存，避免内存泄漏：

// 清空之前的预览内容
display.querySelectorAll('img').forEach(oldImg => {
  URL.revokeObjectURL(oldImg.src);
  oldImg.remove();
});
// 渲染所有选中的图片
files.forEach(file => {
  const previewImg = document.createElement('img');
  previewImg.src = URL.createObjectURL(file);
  // 自定义预览图样式
  previewImg.style.cssText = `
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 8px 8px 0 0;
    border-radius: 4px;
  `;
  display.appendChild(previewImg);
});

3. 后端提交处理 #

如果需要把图片上传到服务端，使用FormData携带文件即可：

const formData = new FormData();
files.forEach((file, index) => {
  formData.append(`images[${index}]`, file);
});
// 后续通过fetch/axios将formData传给后端接口即可

完整可运行代码 #

HTML部分：

<div id="image_display">
  <input type="file" id="image" name="image" accept="image/*" multiple>
</div>

JS部分：

const img = document.getElementById('image');
const display = document.getElementById('image_display');
const MAX_UPLOAD_COUNT = 9;
const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];

img.onchange = evt => {
  const files = Array.from(img.files);
  // 数量校验
  if (files.length > MAX_UPLOAD_COUNT) {
    alert(`最多可上传${MAX_UPLOAD_COUNT}张图片，当前选择了${files.length}张`);
    img.value = '';
    return;
  }
  // 格式校验
  const invalidFile = files.find(file => !ALLOWED_IMAGE_TYPES.includes(file.type));
  if (invalidFile) {
    alert(`文件【${invalidFile.name}】格式不支持，请上传JPG/PNG/GIF格式的图片`);
    img.value = '';
    return;
  }
  // 清空旧预览
  display.querySelectorAll('img').forEach(oldImg => {
    URL.revokeObjectURL(oldImg.src);
    oldImg.remove();
  });
  // 渲染新预览
  files.forEach(file => {
    const previewImg = document.createElement('img');
    previewImg.src = URL.createObjectURL(file);
    previewImg.alt = '预览图';
    previewImg.style.cssText = `
      width: 120px;
      height: 120px;
      object-fit: cover;
      margin: 8px 8px 0 0;
      border-radius: 4px;
    `;
    display.appendChild(previewImg);
  });
}

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