如何修改单图上传展示代码 实现多张图片依次上传显示

修改后的完整可运行代码 #

HTML 部分

<input type="file" accept="image/*" multiple onchange="loadFile(event)">
<div id="imgContainer"></div>

JS 部分

var loadFile = function(event) {
  const imgContainer = document.getElementById('imgContainer');
  // 遍历所有本次选中的图片文件
  for (const file of event.target.files) {
    const img = document.createElement('img');
    img.setAttribute('width', '25%');
    img.src = URL.createObjectURL(file);
    // 图片加载完成后释放内存
    img.onload = function() {
      URL.revokeObjectURL(img.src);
    }
    imgContainer.appendChild(img);
  }
};

核心调整点 #

• 给文件选择框添加multiple属性，支持单次多选多张图片
• 替换原来固定的单张img标签为图片容器imgContainer，所有上传的图片都会插入到该容器内
• 遍历所有选中的文件，为每一张图片动态创建img元素，无论你是单次选多张还是多次逐张上传，都会依次展示所有图片
• 保留了原有的内存释放逻辑，避免内存占用过高

如果需要每次新上传图片时清空之前的展示内容，只需要在for循环前加一行代码：imgContainer.innerHTML = '';即可。

内容的提问来源于stack exchange，提问作者Hari kishore Reddy