基于现有JavaScript单图上传预览实现，如何修改为多图上传？

嘿，要把你现有的单图上传改成支持多图其实很容易，主要需要调整两个核心部分：HTML的文件输入控件，以及JavaScript的文件处理逻辑。我给你梳理一下具体的修改步骤和完整代码：

第一步：修改HTML结构 #

原来的<input>需要加上multiple属性，这样用户就能一次选择多张图片了；另外，原来的单个<img>标签没法显示多张图，咱们换成一个容器（比如<div>）来动态存放所有上传的图片和文件名。

修改后的HTML代码：

<input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" multiple>
<div id="output-container"></div>

第二步：更新JavaScript逻辑 #

原来的代码只处理了event.target.files[0]（也就是第一个文件），现在需要遍历所有选中的文件，为每个文件创建对应的图片元素和文件名显示元素，然后添加到容器里。

更新后的JavaScript代码：

var loadFile = function(event) {
  // 获取存放图片的容器
  const container = document.getElementById('output-container');
  // 先清空容器（可选，如果需要每次上传替换之前的内容的话）
  container.innerHTML = '';
  
  // 遍历所有选中的文件
  for (const file of event.target.files) {
    // 创建图片元素
    const image = document.createElement('img');
    image.src = URL.createObjectURL(file);
    image.width = 200;
    
    // 创建文件名显示元素
    const fileName = document.createElement('p');
    fileName.textContent = file.name;
    
    // 创建一个小容器来放单张图和文件名，方便排版
    const itemContainer = document.createElement('div');
    itemContainer.appendChild(image);
    itemContainer.appendChild(fileName);
    
    // 将单个图片项添加到总容器
    container.appendChild(itemContainer);
  }
}

关键修改点解释 #

• multiple属性：给<input>加上这个属性后，用户在选择文件时可以按住Ctrl/Command键多选图片，或者直接选择整个文件夹里的图片（取决于浏览器支持）。
• 遍历files数组：event.target.files是一个FileList对象，包含了用户选中的所有文件，我们用for...of循环逐个处理。
• 动态创建元素：不再复用单个<img>，而是为每个文件新建图片和文件名元素，这样就能同时显示所有上传的内容了。
• 可选：清空容器：如果希望每次上传新图片时替换掉之前的内容，就保留container.innerHTML = '';；如果想要累加显示所有上传的图片，把这行删掉就行。

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