同一网页中多div上传图片显示异常问题求助

问题根源 #

• 你重复使用了相同的id（photo、file、uploadbtn），DOM中id必须唯一，document.querySelector只会选中第一个匹配的元素，所以第二个上传框触发事件时，始终修改第一个图片的地址。
• label的for属性绑定重复的id，点击第二个标签时，实际触发的是第一个文件输入框。

修改后的代码 #

HTML部分

<div class="user-img">
    <img src="./images/image.jpg" alt="Avatar" class="photo">
    <input type="file" class="file" accept="image/*">
    <label class="uploadbtn"><i class="fas fa-camera"></i></label>
</div>
<div class="user-img">
    <img src="./images/image.jpg" alt="Avatar" class="photo">
    <input type="file" class="file" accept="image/*">
    <label class="uploadbtn"><i class="fas fa-camera"></i></label>
</div>

JavaScript部分

// 获取所有上传容器
const userImgs = document.querySelectorAll('.user-img');

userImgs.forEach(container => {
    const img = container.querySelector('.photo');
    const fileInput = container.querySelector('.file');
    const label = container.querySelector('.uploadbtn');

    // 点击标签触发文件选择框
    label.addEventListener('click', () => {
        fileInput.click();
    });

    // 文件选择后更新对应图片
    fileInput.addEventListener('change', function() {
        const chosenFile = this.files[0];
        if (chosenFile) {
            const reader = new FileReader();
            reader.addEventListener('load', function() {
                img.setAttribute('src', reader.result);
            });
            reader.readAsDataURL(chosenFile);
        }
    });
});

说明 #

• 把重复的id替换成class，确保每个元素的标识不冲突。
• 通过遍历每个.user-img容器，获取当前容器内的图片和文件输入框，这样每个上传操作只会影响当前容器内的图片。
• 给标签绑定点击事件来触发文件选择，避免for属性绑定重复id的问题。

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