JavaScript多图片上传预览异常：第二个上传区无法工作求助

问题根源 #

• 重复ID冲突：页面中所有上传区的按钮、输入框都使用了相同的ID（如#default-btn），但HTML规范要求ID必须唯一，浏览器只会识别第一个匹配的元素。
• JS仅绑定首个元素：document.querySelector只会返回第一个匹配的DOM节点，导致第二个上传区没有绑定任何事件逻辑。
• HTML语法错误：第二个<input>标签未闭合，存在语法问题。

解决方案 #

1. 移除重复ID，改用类名区分元素，每个上传区作为独立容器。
2. 遍历所有上传容器，为每个容器单独绑定事件，确保各区域操作互不干扰。
3. 修复HTML语法错误，补全未闭合标签。

修改后的HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<par-div class="imgsection">
    <!-- 第一个上传区 -->
    <label class="upload-wrapper">
        <par-div class="image">
            <img src="" width="100px" alt="">
        </par-div>
        <par-div class="content">
            <par-div class="icon">
                <i class="bi bi-camera-fill"></i>
            </par-div>
            <par-div class="text">
                upload Main
            </par-div>
        </par-div>
        <par-div class="cancel-btn">
            <i class="bi bi-trash-fill"></i>
        </par-div>
        <button class="custom-btn">Choose a file</button>
        <input class="default-btn" type="file" accept="image/*" hidden>
    </label>
    <!-- 第二个上传区 -->
    <label class="upload-wrapper">
        <par-div class="image">
            <img src="" width="100px" alt="">
        </par-div>
        <par-div class="content">
            <par-div class="icon">
                <i class="bi bi-camera-fill"></i>
            </par-div>
            <par-div class="text">
                upload Main
            </par-div>
        </par-div>
        <par-div class="cancel-btn">
            <i class="bi bi-trash-fill"></i>
        </par-div>
        <button class="custom-btn">Choose a file</button>
        <input class="default-btn" type="file" accept="image/*" hidden>
    </label>
</par-div>

修改后的JS #

// 获取所有上传容器
const uploadWrappers = document.querySelectorAll(".upload-wrapper");

// 遍历每个容器，绑定独立事件
uploadWrappers.forEach(wrapper => {
    const defaultBtn = wrapper.querySelector(".default-btn");
    const customBtn = wrapper.querySelector(".custom-btn");
    const cancelBtnBg = wrapper.querySelector(".cancel-btn");
    const cancelBtn = wrapper.querySelector(".cancel-btn i");
    const img = wrapper.querySelector("img");
    const image = wrapper.querySelector(".image");

    // 自定义按钮点击触发默认文件选择框
    customBtn.addEventListener("click", () => {
        defaultBtn.click();
    });

    // 文件选择后的预览逻辑
    defaultBtn.addEventListener("change", function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function() {
                img.src = reader.result;
                wrapper.classList.add("active");
                image.style.display = 'flex';
                cancelBtnBg.style.display = 'flex';
                defaultBtn.disabled = true;
                customBtn.disabled = true;
            }
            reader.readAsDataURL(file);
        }
    });

    // 取消预览逻辑
    cancelBtn.addEventListener("click", function(e) {
        e.preventDefault();
        img.src = "";
        wrapper.classList.remove("active");
        image.style.display = 'none';
        cancelBtnBg.style.display = 'none';
        defaultBtn.disabled = false;
        customBtn.disabled = false;
    });
});

关键改动说明 #

• 将重复ID替换为类名，通过容器范围查询元素，避免全局ID冲突。
• 使用querySelectorAll获取所有上传容器，通过forEach遍历实现每个区域的独立事件绑定。
• 移除全局函数defaultBtnActive，直接在自定义按钮的点击事件中触发文件选择框，避免全局逻辑冲突。
• 修复第二个<input>标签的语法错误，确保页面结构完整。

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