Выполнение функции для любого элемента одного типа

Question

Я пытаюсь создать систему загрузки файлов. Эта система загрузки файлов отлично работает для части mosot. Проблема возникает потому, что на странице есть несколько элементов HTML, которые имеют класс file и несколько элементов HTML, которые являются upload-buttons. В настоящий момент загрузка файлов отлично подходит только для первого элемента HTML, который содержит загружаемое текстовое поле и кнопку загрузки только, все остальные не работают (из-за того, что Javascript выбирает объект [0] каждый раз).

Мой вопрос: как я могу настроить функцию ниже, чтобы удовлетворить любой загружаемый контейнер/кнопку, которая была использована?

По существу, что должно произойти, если пользователь нажимает на кнопку n-й загрузки, функциональные слоты массива должны быть как-то равны n-1.

Я ценю любую помощь с этой проблемой.

Большое спасибо заранее!

$(document).on('click','.upload-button', function(){ 
     var data = new FormData(); 

     jQuery.each($('.file')[0].files, function(i, file) { 
      data.append('file-'+i, file); 
     }); 
      //Some more code... 
}); 

HTML

 <div class="input-text-field"> 
     <input name="userfile" class="file" type="file" /> 
     <input class="submit upload-button" type="submit" value="Upload" /> 
    </div> 

Answer 1

Используйте prev() таргетинг только предыдущий .file элемента, и знать, что ваш код does'nt есть .file элемента, он имеет #FILE элемента, и несколько идентификаторов являются инвалид.

$(document).on('click','.upload-button', function(){ 
     var data = new FormData(); 

     jQuery.each($(this).prev('.file')[0].files, function(i, file) { 
      data.append('file-'+i, file); 
     }); 
      //Some more code... 
}); 

HTML

<div class="input-text-field"> 
    <input name="userfile" class="file" type="file" /> 
    <input class="submit upload-button" type="submit" value="Upload" /> 
</div>