本教程探讨如何在同一网页上动态上传并显示多张不同的图片，解决因html `id`属性重复导致的常见问题。我们将详细讲解`id`必须唯一性原则，并演示如何通过使用`class`属性结合javascript的迭代机制，为多个相似的交互元素（如文件上传和图片显示）分别绑定事件监听器，确保每个元素都能独立工作。
在开发Web应用时，我们经常需要实现用户在同一页面上传并预览多张不同图片的功能。一个常见的场景是，页面上存在多个图片占位符，每个占位符都对应一个文件上传按钮。然而，如果处理不当，开发者可能会遇到这样的问题：当尝试为第二个图片上传文件时，改变的却是第一个图片，而第二个图片纹丝不动。这通常是由于对HTML元素的唯一标识符id属性的误用造成的。
理解核心问题：HTML ID 的唯一性
HTML规范明确指出，id属性在整个文档中必须是唯一的。这意味着任何一个id值都只能对应页面上的一个元素。当JavaScript代码使用document.querySelector('#someId')来选取元素时，它只会返回文档中第一个匹配该id的元素。因此，如果在多个元素上使用了相同的id，如id="photo"或id="file"，那么无论用户点击哪个上传按钮，JavaScript代码总是会操作第一个被找到的#photo或#file元素，从而导致非预期的行为。
正确方法：利用 Class 属性与迭代机制
为了解决这个问题，我们应该利用class属性来标识一组具有相似功能或样式的元素，并结合JavaScript的迭代方法来为它们分别绑定事件。class属性可以被多个元素共享，这正是它与id的主要区别和优势。
1. HTML 结构调整
首先，将所有重复的id属性更改为class属性。例如，将id="photo"改为class="photo"，id="file"改为class="file-input"，id="uploadbtn"改为class="upload-btn"。同时，为了方便JavaScript代码找到与当前文件输入框相关的图片元素，我们可以将图片和文件输入框放在同一个父容器内，例如一个带有特定类名的div。
立即学习“Java免费学习笔记（深入）”；
动态多图上传与显示
@@##@@
@@##@@
2. JavaScript 逻辑实现
接下来，使用document.getElementsByClassName()方法来获取所有具有特定类名的元素集合。这个方法返回一个HTMLCollection，我们可以通过Array.from()将其转换为数组，或者直接使用for...of循环来遍历它。
在遍历过程中，对于每个文件输入框，我们需要找到其对应的图片显示元素。一种有效的方法是利用DOM遍历，例如通过closest()方法找到最近的共同父元素（例如.user-img-container），然后在其内部使用querySelector()来查找图片元素。这样可以确保每个文件输入框都操作其自身的图片。
同时，由于我们将原始的input type="file"隐藏了，并用一个label元素作为自定义的上传按钮，我们需要为每个label绑定点击事件，使其能触发对应input的点击行为。
// 获取所有文件输入框元素
const fileInputs = document.getElementsByClassName('file-input');
// 获取所有自定义上传按钮（label）
const uploadButtons = document.getElementsByClassName('upload-btn');
// 为每个自定义上传按钮绑定点击事件，以触发对应的文件输入框
Array.from(uploadButtons).forEach(button => {
button.addEventListener('click', function() {
// 通过 closest 找到最近的父容器，然后在父容器内查找对应的 .file-input 元素
const container = this.closest('.user-img-container');
const fileInput = container.querySelector('.file-input');
fileInput.click(); // 触发文件输入框的点击事件
});
});
// 遍历每个文件输入框，并为其添加 'change' 事件监听器
Array.from(fileInputs).forEach(fileInput => {
fileInput.addEventListener('change', function() {
// 获取当前文件输入框所属的图片元素
// 通过 closest 找到最近的父容器，然后在父容器内查找 .photo 元素
const container = this.closest('.user-img-container');
const imgElement = container.querySelector('.photo');
const chosenFile = this.files[0]; // 获取用户选择的文件
if (chosenFile) {
const reader = new FileReader(); // 创建 FileReader 对象
// 当文件读取完成时触发
reader.addEventListener('load', function() {
imgElement.setAttribute('src', reader.result); // 设置图片元素的 src 属性为读取结果
});
reader.readAsDataURL(chosen
