如何控制动态添加的输入类型文件？

Question

我正在尝试获取动态添加的输入类型文件的大小。

JSP

 <div>
    <button type="button"  id="appendTab" name="appendTab">Append</button>
    <button type="button"  id="deleteTab" name="deleteTab">Delete</button>  
 </div>
 <table id="bnspTable" class="table">
    <thead>
         <tr>
             <th style="width:8%;">check</th>
             <th colspan="2" style="text-align:center; width:82%">FileName</th>
             <th style="text-align:center; width:10%">FileSize</th>
         </tr>
    </thead>
    <tbody id="fileTbody">
    </tbody>
 </table>

JS

 $("#appendTab").on("click",function(){
        page.appendTab();
 })
 page.appendTab = function(){
    var cnt = $("#fileTbody tr").length + 1;

    var addHtml = '<tr class="addFile" style="text-align:center;">';
    addHtml += '<td><input type="checkbox" name="P_CHECK" style="width:25px; height:25px;"></td>';
    addHtml += '<td colspan="2"><input type="text" name="uploadName" size="70" readonly><input type="file" id= "file_nm' +cnt+'" name="P_ORG_FILE_NM" class="fileNM" onchange="sizeCheck()"></td>';
    addHtml += '<td><input type="text" name="fileSize" readonly size="10"></td>';
    addHtml += '</tr>';
    $("#bnspTable").find('tbody').append(addHtml);
  }; //Ability to add rows to tbody

 sizeCheck = function(){
    $(document).on('change','.fileNM',(function(){

        var file = this.files[0];
        var fileName = file.name;
        var fileSize = file.size;
        $("input[name='fileSize']").val(fileSize);
    }));
  /* 
  At first,i can do it by giving a class, but it will be overwritten with the file size added 
  later.*/
};

起初，我可以通过提供一个类来做到这一点，但它会被添加的文件大小覆盖 稍后。

我正在尝试通过 id 进行控制，但它不起作用，所以我将按名称进行。 当我添加一个文件时，我想将文件的大小输入到 name = "fileSize"

但是，我不知道要添加多少文件，所以我不知道该怎么办。

Answer 1

这里有两个主要问题。首先，由于您在这里正确使用了委托事件处理程序，您只需要实例化一次，而不是在 sizeCheck() 函数中。这样做将意味着处理程序被多次绑定，这是您最不需要的。因此，将 on() 调用移到该函数之外，并从您的 HTML 中删除 onclick。

第二个问题是您在更改处理程序中选择了 all input[name='fileSize'] 元素，而您只需要找到与触发事件的文件输入相关的元素。为此，请使用 jQuery 的 DOM 遍历方法，在本例中为 closest() 和 find()。

说了这么多，试试这个：

let page = {};
page.appendTab = function() {
  var addHtml = '<tr class="addFile">';
  addHtml += '<td><input type="checkbox" name="P_CHECK"></td>';
  addHtml += '<td colspan="2"><input type="text" name="uploadName" size="70" readonly><input type="file"  name="P_ORG_FILE_NM" class="fileNM"></td>';
  addHtml += '<td><input type="text" name="fileSize" readonly size="10"></td>';
  addHtml += '</tr>';
  $("#bnspTable").find('tbody').append(addHtml);
};

$("#appendTab").on("click", function() {
  page.appendTab();
})

$(document).on('change', '.fileNM', (function() {
  var file = this.files[0];
  var fileName = file.name;
  var fileSize = file.size;
  $(this).closest('tr').find('input[name="fileSize"]').val(fileSize);
}));

.addFile {
  text-align: center;
}

.addFile input[type="checkbox"] {
  width: 25px;
  height: 25px;
}

tr th:nth-child(1) {
  width: 8%;
}

tr th:nth-child(2) {
  text-align: center;
  width: 82%
}

tr th:nth-child(3) {
  text-align: center;
  width: 10%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button type="button" id="appendTab" name="appendTab">Append</button>
  <button type="button" id="deleteTab" name="deleteTab">Delete</button>
</div>
<table id="bnspTable" class="table">
  <thead>
    <tr>
      <th>check</th>
      <th colspan="2">FileName</th>
      <th>FileSize</th>
    </tr>
  </thead>
  <tbody id="fileTbody"></tbody>
</table>

顺便说一句，不要使用增量id 属性。这是一种反模式，因为它创建了更复杂、更冗长且更难维护的代码。正确使用 DOM 遍历时，您根本不需要它们。此外，不要使用内联style 属性。将所有样式规则放在外部样式表中。

Answer 2

你可以在将 html 添加到 DOM 之后绑定一个事件。 下面是更新的代码。

var page={}
$("#appendTab").on("click",function(){
        page.appendTab();
 })
 page.appendTab = function(){
    var cnt = $("#fileTbody tr").length + 1;
    var addHtml = '<tr class="addFile" style="text-align:center;">';
    addHtml += '<td><input type="checkbox" name="P_CHECK" style="width:15px; height:15px;"></td>';
    addHtml += '<td colspan="2"><input type="text" name="uploadName" style="width:100px;" id="file_' +cnt+'"  size="70" readonly><input type="file" id= "file_nm' +cnt+'" name="P_ORG_FILE_NM" class="fileNM"></td>';
    addHtml += '<td><input type="text" name="fileSize" readonly size="10" id="size_inpt' +cnt+'"></td>';
    addHtml += '</tr>';
    $("#bnspTable").find('tbody').append(addHtml);
    $("#file_nm" +cnt).on("change",function(){
         debugger
         var file = this.files[0];
         
        var fileName = file.name;
        var fileSize = file.size;
        $("#size_inpt"+cnt).val(fileSize);
        $("#file_" +cnt).val(fileName)
    })
  }; //Ability to add rows to tbody

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button type="button"  id="appendTab" name="appendTab">Append</button>
    <button type="button"  id="deleteTab" name="deleteTab">Delete</button>  
 </div>
 <table id="bnspTable" class="table">
    <thead>
         <tr>
             <th style="width:8%;">check</th>
             <th colspan="2" style="text-align:center; width:82%">FileName</th>
             <th style="text-align:center; width:10%">FileSize</th>
         </tr>
    </thead>
    <tbody id="fileTbody">
    </tbody>
 </table>