实现类WordPress图片上传组件：上传后自动切换至第二个标签页

1. 上传完成后自动切换到第二个标签页 #

在showImages函数末尾添加标签切换逻辑，需替换为你项目中实际的标签按钮和面板选择器：

const showImages = () => {
 let images = "";
 files.forEach((e, i) => {
    images += `<div class="item-img pos-relative">
            <img src="${URL.createObjectURL(e)}" alt="image">
            <div class="tick">
                <img src="{{ asset('imgs/admin/icons/select.svg') }}" alt="" onclick="delImage(${i})">
            </div>
        </div>`;
 });

 container.innerHTML = images;

 // 自动切换到第二个标签（索引从0开始，第二个标签对应索引1）
 const tabButtons = document.querySelectorAll('.tab-btn'); // 替换为你的标签按钮选择器
 const tabPanels = document.querySelectorAll('.tab-panel'); // 替换为你的标签面板选择器
 if(tabButtons.length > 1 && tabPanels.length > 1) {
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanels.forEach(panel => panel.classList.remove('active'));
    tabButtons[1].classList.add('active');
    tabPanels[1].classList.add('active');
 }
};

2. 动态生成图片未应用样式 #

排查以下关键点：

• 确保动态生成的.item-img类名与静态HTML完全一致，比如pos-relative属性未遗漏
• 提升CSS样式优先级，避免被其他选择器覆盖：

.img-container .item-img.pos-relative {
  /* 你的图片容器样式 */
}

• 控制台打印URL.createObjectURL(e)结果，验证图片链接是否有效

3. 选中图片的激活样式未生效 #

动态生成的元素需要重新绑定点击事件，修改showImages函数添加激活逻辑：

const showImages = () => {
 let images = "";
 files.forEach((e, i) => {
    images += `<div class="item-img pos-relative">
            <img src="${URL.createObjectURL(e)}" alt="image">
            <div class="tick">
                <img src="{{ asset('imgs/admin/icons/select.svg') }}" alt="" onclick="delImage(${i})">
            </div>
        </div>`;
 });

 container.innerHTML = images;

 // 绑定图片选中激活事件
 const itemImgs = document.querySelectorAll('.item-img');
 itemImgs.forEach(imgItem => {
    imgItem.addEventListener('click', () => {
      // 移除其他图片的激活状态
      itemImgs.forEach(item => item.classList.remove('active'));
      // 添加当前图片的激活状态
      imgItem.classList.add('active');
      // 控制选中标记显示/隐藏
      const tick = imgItem.querySelector('.tick');
      tick.style.display = imgItem.classList.contains('active') ? 'block' : 'none';
    });
 });

 // 自动切换标签逻辑（同上）
 const tabButtons = document.querySelectorAll('.tab-btn');
 const tabPanels = document.querySelectorAll('.tab-panel');
 if(tabButtons.length > 1 && tabPanels.length > 1) {
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanels.forEach(panel => panel.classList.remove('active'));
    tabButtons[1].classList.add('active');
    tabPanels[1].classList.add('active');
 }
};

同时添加激活状态的CSS样式：

.item-img.active {
  border: 2px solid #007cba; /* 模拟WordPress选中边框样式 */
}
.item-img .tick {
  display: none; /* 默认隐藏选中标记 */
}
.item-img.active .tick {
  display: block; /* 选中时显示标记 */
}

完整修改后的JS代码 #

// gallery start
let files = [], // 存储上传的图片
form = document.querySelector(".browse-area"),
container = document.querySelector(".img-container"),
text = document.querySelector(".inner"),
browse = document.querySelector(".select"),
input = document.querySelector(".browse-area input");

browse.addEventListener("click", () => input.click());

// 文件选择事件
input.addEventListener("change", () => {
let file = input.files;

for (let i = 0; i < file.length; i++) {
    if (files.every((e) => e.name !== file[i].name)) files.push(file[i]);
}

showImages();
});

const showImages = () => {
 let images = "";
 files.forEach((e, i) => {
    images += `<div class="item-img pos-relative">
            <img src="${URL.createObjectURL(e)}" alt="image">
            <div class="tick">
                <img src="{{ asset('imgs/admin/icons/select.svg') }}" alt="" onclick="delImage(${i})">
            </div>
        </div>`;
 });

 container.innerHTML = images;

 // 绑定图片选中激活事件
 const itemImgs = document.querySelectorAll('.item-img');
 itemImgs.forEach(imgItem => {
    imgItem.addEventListener('click', () => {
      itemImgs.forEach(item => item.classList.remove('active'));
      imgItem.classList.add('active');
      const tick = imgItem.querySelector('.tick');
      tick.style.display = imgItem.classList.contains('active') ? 'block' : 'none';
    });
 });

 // 自动切换到第二个标签页
 const tabButtons = document.querySelectorAll('.tab-btn');
 const tabPanels = document.querySelectorAll('.tab-panel');
 if(tabButtons.length > 1 && tabPanels.length > 1) {
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanels.forEach(panel => panel.classList.remove('active'));
    tabButtons[1].classList.add('active');
    tabPanels[1].classList.add('active');
 }
};

const delImage = (index) => {
 files.splice(index, 1);
 showImages();
};

// 拖拽上传事件
form.addEventListener("dragover", (e) => {
 e.preventDefault();
 form.classList.add("dragover");
 text.innerHTML = "Drop images here";
});

form.addEventListener("dragleave", (e) => {
 e.preventDefault();
 form.classList.remove("dragover");
 text.innerHTML = 'Drag & drop image here or <span class="select">Browse</span>';
});

form.addEventListener("drop", (e) => {
 e.preventDefault();
 form.classList.remove("dragover");
 text.innerHTML = 'Drag & drop image here or <span class="select">Browse</span>';

 let file = e.dataTransfer.files;
 for (let i = 0; i < file.length; i++) {
    if (files.every((e) => e.name !== file[i].name)) files.push(file[i]);
 }

 showImages();
});
// gallery end

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