使用jQuery实现动态增加与删除文件上传控件

实现原理与目标

核心思路是维护一个递增的计数器（index）。当用户点击“增加”按钮时，生成新的 <tr> 行，其中包含 <input type='file'> 和描述输入框，并赋予唯一的 name 属性（如 file1, desc1）。当点击“删除”时，移除对应的两行，并重新遍历现有元素以更新名称，防止出现编号断层导致后端解析困难。

准备工作

1. 环境依赖：本示例使用 jQuery 库，请确保已引入 jquery-2.2.0.min.js 或更高版本。
2. 基础结构：页面需包含一个表格布局，用于整齐排列文件列表，以及初始的第一行上传控件。

具体操作步骤

第1步：构建基础 HTML 结构

首先创建表格框架，预留第一行作为默认值，并设置“增加”和“提交”按钮的位置。注意给新增的行预留特定的 CSS 类名（如 file 和 desc），以便后续通过 DOM 操作精准定位。

<table>
  <!-- 默认第一行 -->
  <tr class="file">
    <td>File1:</td>
    <td><input type="file" name="file1" /></td>
  </tr>
  <tr class="desc">
    <td>Desc1:</td>
    <td><input type="text" name="desc1" /></td>
  </tr>

  <!-- 操作按钮区域 -->
  <tr>
    <td><input type="submit" id="submit" value="上传" /></td>
    <td><button id="addFile">增加</button></td>
  </tr>
</table>

第2步：编写 jQuery 交互逻辑

在文档加载完成后，定义全局变量 i 用于记录当前文件的序号。绑定“增加”按钮的点击事件，执行以下动作：

• 插入新行：在当前按钮所在行的上方前插入新的 <tr> 片段，包含文件输入框和带删除按钮的描述行。
• 初始化序号：利用当前的 i 值填充 name 属性。
• 绑定删除事件：为刚生成的删除按钮绑定点击事件，实现反向操作。

<script type="text/javascript">
$(function(){
  var i = 2; // 从第2个开始计数，因为已有第1个

  $("#addFile").click(function(){
    // 1. 插入新的文件行和描述行
    $(this).parent().parent().before("
      <tr class='file'>
        <td>File" + i + ":</td>
        <td><input type='file' name='file" + i + "'/></td>
      </tr>
      <tr class='desc'>
        <td>Desc" + i + ":</td>
        <td>
          <input type='text' name='desc" + i + "'/>
          <button id='delete" + i + "'>删除</button>
        </td>
      </tr>
    ");
    
    i++; // 序号递增

    // 2. 为新产生的删除按钮绑定事件
    $("#delete"+(i-1)).click(function(){
      var $tr = $(this).parent().parent(); // 获取当前描述行
      $tr.prev("tr").remove();             // 移除上方的对应文件行
      $tr.remove();                       // 移除当前描述行

      // 3. 重新排序所有剩余行的编号
      updateIndexes();
    });
  });

  // 辅助函数：重新计算并更新所有 file/desc 行的 name 和 text
  function updateIndexes() {
    $(".file").each(function(index){
      var n = index + 1;
      $(this).find("td:first").text("File"+n);
      $(this).find("td:last input").attr("name","file"+n);
    });
    $(".desc").each(function(index){
      var n = index + 1;
      $(this).find("td:first").text("Desc"+n);
      $(this).find("td:last input").attr("name","desc"+n);
    });
  }
});
</script>

第3步：验证功能与数据完整性

运行页面后，尝试点击“增加”，观察是否有新的 File/Desc 行出现在指定位置。点击某一行旁边的“删除”按钮，确认该行及其上方的文件行同时消失，且剩余行的编号（File1, File2...）连续无跳跃。这样当表单提交时，服务器端即可根据 file1, file2... 这样的命名规则正确解析多个文件。

注意事项与优化建议

• 安全性：前端仅用于提升体验，后端必须严格校验上传文件的类型、大小及合法性，防止恶意上传。
• 性能：如果预计上传数量非常大（例如超过50个），频繁操作 DOM 可能会引起卡顿，建议考虑虚拟列表或使用更现代的前端框架（如 Vue/React）管理状态。
• 兼容性：代码基于 jQuery 编写，兼容主流浏览器。若无需 jQuery，可使用原生 JavaScript 的 document.createElement 和 insertAdjacentHTML 替代。

总结

通过上述步骤，我们实现了一个轻量级的动态文件上传组件。关键点在于利用全局变量维持状态，并通过 DOM 操作后的二次遍历来保持 ID 和 Name 属性的连续性。以上就是使用jQuery实现动态增加与删除文件上传控件的详细内容，更多关于JavaScript动态表单的资料请关注本站其它相关文章！