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

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 进行控制，但它不起作用，所以我将通过名称来进行控制。 当我添加文件时，我想将文件的大小放入输入中，名称=“fileSize”

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

Answer 1

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

第二个问题是您在更改处理程序中选择所有 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 属性。将所有样式规则放入外部样式表中。