Отображение метки (HTMLHelper) для события jquery выбранного элемента управления в форме

Question

Я создаю форму в MVC, и все поля генерируются динамически. Есть элементы управления для загрузки нескольких файлов. Я хочу показать общее количество файлов, загруженных для каждого элемента управления отдельно в метке / промежутке, которые также должны генерироваться динамически с использованием JQuery.

JQuery код:

$(".file-upload").on("change", function () {
            debugger;
            var files = $(this)[0].files;
            var count = files.length;
            if (count != 0) {
                $(".file-upload").append('<span class="file-upload-count success">' + count + '"files successfully uploaded"</span>');

            } else {
                $(".file-upload").append('<span class="file-upload-count failure">"Upload files again."</span>');

            }
        });

form.cshtml:

<td>   
    <span class="fa fa-plus" onclick="document.getElementById('@l_UploadID').click(); ShowFileCountLabel('@l_UploadID','')"></span>
    @Html.TextBoxFor(model => model.ExpenseDetails[i].files, "", new { @id = @l_UploadID, @type = "file", @multiple = "multiple", @class = "invisible file-upload", @style = "height:0px" })
</td>

Answer 1

Ваш <span.file-upload-count> не добавлен в ваше дерево DOM, потому что вы пытаетесь добавить его в элемент <input>, что невозможно.Вам необходимо добавить его в элемент, который может иметь дочерние элементы, например <div>.

. О выбранных именах файлов доступны элементы с элементами this.files (или $(this)[0].files, если вы абсолютно).хочу использовать jQuery).

const jUploadLabel = $('div').first(),
  uploadInput = document.getElementById('@l_UploadID'),
  jUploadCount = $('#file-upload-count');

// Opens the file navigator when the label is clicked.
jUploadLabel.on('click', () => {
  $(uploadInput).click();
});

$(uploadInput).on("change", function () {
  let files = this.files,
    count = files.length,
    fileWord = (count > 1) ? 'files' : 'file';
    
  // Removes counter element's content and classes.
  jUploadCount.empty().removeClass('sucess failure');

  // If at least one file chosen...
  if (count > 0) {
    jUploadCount.addClass('success');
  
    jUploadCount.append(
      `<div>${count} ${fileWord} successfully uploaded.</div>`
    );

    // For each chosen file, displays its filename.
    for (let file of files) {
      jUploadCount.append(
        `<div>${file.name}</div>`
      );
    }
  }
  // ...else if no file...
  else {
    jUploadCount.addClass('failure');
  
    jUploadCount.append(
      '<div>Upload files again.</div>'
    );
  }
});

.invisible {
  display: none;
}

.success {
  color: green;
}

.failure {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fa fa-plus">Choose a file</div>
<input class="invisible file-upload" id="@l_UploadID" type="file" multiple>
<div id="file-upload-count"></div>