Как сделать функцию которая подгружает множество input файлов в разных местах?

Question

[khalel2]

Я вкладываю значение input в label и немного сокращаю его, таких блоков будет много и будет не совсем правильно писать штук 10 таких функций на каждый блок с input файлом.

<div class="form-control">
         <label for="resume" class="fileInputLabel">Резюме</label>
         <input type="file" id="resume" class="fileInput" style="display:none;">
      </div>
      <div class="form-control">
         <label for="pensia" class="fileInputLabel">Пенсия</label>
         <input type="file" id="pensia" class="fileInput" style="display:none;">
      </div>

      <div class="form-control">
         <label for="rabota" class="fileInputLabel">Работа</label>
         <input type="file" id="rabota" class="fileInput" style="display:none">
      </div>

let fileInput = document.getElementsByClassName(tempFileInput)[0];
let selectName = document.getElementsByClassName(tempFileInputLabel)[0];

let fileInput2 = document.getElementsByClassName(tempFileInput)[0];
let selectName2 = document.getElementsByClassName(tempFileInputLabel)[0];

let fileInput3 = document.getElementsByClassName(tempFileInput)[0];
let selectName3 = document.getElementsByClassName(tempFileInputLabel)[0];

fileInput.onchange = function() {
let filename = fileInput.files[0].name;
selectName.innerText = filename.slice(0, 15)+ "...." + filename.substring(filename.length - 5);
}

fileInput2.onchange = function() {
let filename = fileInput2.files[0].name;
selectName2.innerText = filename.slice(0, 15)+ "...." + filename.substring(filename.length - 5);
}

fileInput3.onchange = function() {
let filename = fileInput3.files[0].name;
selectName3.innerText = filename.slice(0, 15)+ "...." + filename.substring(filename.length - 5);
}

Answer 1

[Вадим]

function getChangeListener(selectNameElement) {
  return function() {
    const fileName = this.files[0].name
    selectNameElement.innerText = filename.slice(0, 15)+ "...." + filename.substring(filename.length - 5);
  }
}

fileInput.addEventListener('change', getChangeListener(selectName))
fileInput2.addEventListener('change', getChangeListener(selectName2))

Comments

[khalel2]

Круто, просто у меня таких инпутов будет 10, и думаю будет не совсем правильно, но код ты облагородил более или менее. Большое спасибо.

[Вадим]

khalel2, ну, это вам не подходит? Можно через деллигирование один обработчик сделать на любое количество инпутов. Что вам кажется не правильно?