javascript - 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");
  }
}