如何根据用户输入的整数动态生成对应数量的type为file的input上传按钮

你可以直接复用以下开箱即用的代码，包含输入合法性校验、动态生成逻辑：

1. HTML 结构 #

<!-- 数量输入文本框 -->
<input type="text" id="fileCountInput" placeholder="请输入上传文件数量">
<!-- 动态生成的文件上传按钮容器 -->
<div id="fileUploadContainer"></div>

2. JS 逻辑 #

const countInput = document.getElementById('fileCountInput');
const uploadContainer = document.getElementById('fileUploadContainer');

countInput.addEventListener('input', function() {
  // 校验输入值是否为正整数
  const count = parseInt(this.value.trim(), 10);
  // 清空原有上传按钮
  uploadContainer.innerHTML = '';
  
  if (!isNaN(count) && count > 0) {
    // 循环生成对应数量的文件上传按钮
    for (let i = 0; i < count; i++) {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      // 如果需要后端批量接收文件，可添加name属性：fileInput.name = 'uploadFiles[]'
      fileInput.style.display = 'block';
      fileInput.style.margin = '8px 0';
      uploadContainer.appendChild(fileInput);
    }
  }
});

核心逻辑说明 #

• 监听文本框的input事件，输入内容变化时实时触发渲染
• 新增输入校验逻辑，仅当输入为正整数时才生成上传按钮，避免无效输入导致的异常
• 每次生成新按钮前先清空容器，避免之前生成的按钮残留
• 生成的input标签可根据需求自定义样式、accept限制文件类型等属性

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