限制按钮点击次数并为元素ID/Name添加索引的实现方案咨询

问题说明 #

正在开发图片上传功能，需求为：点击按钮可添加更多图片上传字段，同时限制按钮的点击次数。目前按钮已实现添加字段功能，但新增字段的ID和Name属性重复，导致JavaScript代码无法正常运行。已知需为元素添加索引来区分，但不清楚具体实现方式。

解决思路 #

• 引入全局计数器跟踪新增字段的索引，确保每个字段的ID、Name属性唯一
• 重构动态生成字段的逻辑，用计数器值替换固定的编号（如file1改为file${counter}）
• 调整事件绑定方式，避免依赖全局ID，改用相对元素查找或传递索引参数
• 添加按钮点击次数限制，达到上限后禁用按钮

修改后的完整代码 #

JavaScript代码 #

// 初始化计数器和最大可添加数量
let uploadCounter = 1;
const MAX_UPLOADS = 5; // 可根据需求调整最大数量

function createGambar() {
  // 检查是否达到最大添加次数
  if (uploadCounter >= MAX_UPLOADS) {
    document.getElementById('buttonAdd').disabled = true;
    alert('已达到最大可添加图片数量');
    return;
  }
  
  uploadCounter++;
  const index = uploadCounter;
  
  var newDiv = document.createElement('div');
  newDiv.setAttribute('class', 'input-group mb-3');
  // 用索引替换固定编号，确保ID和Name唯一
  newDiv.innerHTML = `
    <div class='col-sm-6'>
      <span>Lampiran ${index}</span>
      <div class='input-group'>
        <input type='text' class='form-control bg-light' id='label_file_${index}' disabled placeholder='Gambar'>
        <input type='file' name='lampiran${index}' id='file${index}' hidden onchange='setFileName(${index});'>
        <div class='input-group-append'>
          <div class='btn btn-primary px-4' onclick='document.getElementById("file${index}").click();'>
            <i class='fa-solid fa-magnifying-glass'></i>
          </div>
        </div>
      </div>
      <center class='mt-2'>
        <img id='thumb_${index}' src='' class='preview' />
      </center>
    </div>
    <div class='col-sm-6'>
      <span>Kapsyen Gambar ${index}</span>
      <div class='input-group mb-3'>
        <textarea class='form-control' style='resize:none' name='kapsyen${index}' id='kapsyen${index}' cols='20' rows='3' placeholder='e.g YM Pengarah Memberi Cenderahati Kepada Tetamu Jemputan' required></textarea>
      </div>
    </div>
  `;
  document.getElementById("newGambar").appendChild(newDiv);
}

function setFileName(index) {
  const fileInput = document.getElementById(`file${index}`);
  const labelInput = document.getElementById(`label_file_${index}`);
  if (fileInput.files.length > 0) {
    labelInput.value = fileInput.files[0].name;
    previewImage(index, fileInput.files[0]);
  }
}

function previewImage(index, file) {
  const thumbImg = document.getElementById(`thumb_${index}`);
  thumbImg.src = "";
  if (file.type.split('/')[0] === 'image') {
    thumbImg.src = URL.createObjectURL(file);
  }
}

HTML代码 #

<div class="row" id="newGambar">
  <!-- 初始默认添加第一个字段，可根据需求调整为留空 -->
  <div class='input-group mb-3'>
    <div class='col-sm-6'>
      <span>Lampiran 1</span>
      <div class='input-group'>
        <input type='text' class='form-control bg-light' id='label_file_1' disabled placeholder='Gambar'>
        <input type='file' name='lampiran1' id='file1' hidden onchange='setFileName(1);'>
        <div class='input-group-append'>
          <div class='btn btn-primary px-4' onclick='document.getElementById("file1").click();'>
            <i class='fa-solid fa-magnifying-glass'></i>
          </div>
        </div>
      </div>
      <center class='mt-2'>
        <img id='thumb_1' src='' class='preview' />
      </center>
    </div>
    <div class='col-sm-6'>
      <span>Kapsyen Gambar 1</span>
      <div class='input-group mb-3'>
        <textarea class='form-control' style='resize:none' name='kapsyen1' id='kapsyen1' cols='20' rows='3' placeholder='e.g YM Pengarah Memberi Cenderahati Kepada Tetamu Jemputan' required></textarea>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-3">
  </div>
  <div class="col-sm-6">
    <button type="button" id="buttonAdd" class="btn btn-success mt-1 w-100" onclick="createGambar(); ">
      <i class="fa-solid fa-add"></i>&nbsp;&nbsp;Tambah Perkembangan
    </button>
  </div>
  <div class="col-sm-3">
  </div>
</div>

关键修改点说明 #

• 新增uploadCounter计数器，每次点击添加按钮时递增，生成唯一的索引值
• 将所有固定ID/Name（如file1、label_file）替换为带索引的动态值（如file${index}、label_file_${index}）
• 修改setFileName和预览函数，接收索引参数，精准操作对应字段
• 添加MAX_UPLOADS常量控制最大可添加数量，达到上限后禁用按钮并提示
• 初始HTML中添加了第一个默认字段，确保用户打开页面就有一个上传入口（可根据需求调整）

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