Как управлять динамически добавляемым типом входного файла?

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

вы, вероятно, можете связать событие после добавления 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>

Answer 2

Здесь есть две основные проблемы. Во-первых, поскольку вы правильно используете делегированный обработчик событий, вам нужно создать его экземпляр один раз, а не в функции sizeCheck(). Это будет означать, что обработчик будет связан несколько раз, и это последнее, что вам нужно. Поэтому переместите вызов on() за пределы этой функции и удалите onclick из вашего HTML.

Вторая проблема заключается в том, что вы выбираете все 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. Поместите все правила стиля во внешнюю таблицу стилей.