Функция запуска для всех типов входных файлов в javascript

Question

У меня есть несколько файлов типа ввода на моей странице и вы хотите запустить функцию, которая дает мне размер файла. У меня есть функция для получения размера типа файла, но мне интересно, есть ли способ, которым я могу вызвать эту же функцию для другого элемента типа ввода.

Текущий способ у меня есть, мне нужно будет создать для него новую функцию и не хочу этого. Это мой JSbin

<input type="file" name="someName" id="uploadID" /> 
<input type="file" name="someName" id="uploadID2" /> 
<input type="file" name="someName" id="uploadID3" /> 

var el = document.getElementById('uploadID'); 
el.onchange = function(){ 
    var input, file; 

    if (!window.FileReader) { 
     alert("The file API isn't supported on this browser yet."); 
     return; 
    } 

    input = document.getElementById('uploadID'); 
    if (!input) { 
     alert("p", "Um, couldn't find the fileinput element."); 
    } 
    else if (!input.files) { 
     alert("This browser doesn't seem to support the `files` property of file inputs."); 
    } 
    else if (!input.files[0]) { 
     alert("Please select a file before clicking 'Load'"); 
    } 
    else { 
     file = input.files[0]; console.log(file); 
     alert("File " + file.name + " is " + file.size + " bytes in size"); 
    } 
}; 

Answer 1

Вы можете добавить ту же функцию прослушивателя событий всех входов. Вам не нужно создавать новый для каждого входа, потому что в прослушивателе событий вы можете ссылаться на элемент, к которому был добавлен слушатель, с помощью this.

var els = document.querySelectorAll('input'); 
[].forEach.call(els, function(el) { 
    el.addEventListener('change', listener); 
}); 
function listener() { 
    if (!window.FileReader) { 
    alert("The file API isn't supported on this browser yet."); 
    return; 
    } 
    var input = this; 
    if (!input.files) { 
    alert("This browser doesn't seem to support the `files` property of file inputs."); 
    } else if (!input.files[0]) { 
    alert("Please select a file before clicking 'Load'"); 
    } else { 
    var file = input.files[0]; console.log(file); 
    alert("File " + file.name + " is " + file.size + " bytes in size"); 
    } 
}