複数のaddEventListenerを1つにまとめたい

Question

ファイルアップローダが50個以上存在するフォームがあります。
すべてにaddEventListenerを持たせたいのですが、

$(function() {
var filesizeLimit = 1024 * 1024 * 5;

// 1個目のアップローダ
var fileInput01 = document.getElementById('image01');
fileInput01.addEventListener('change', function(e){
	var file = e.target.files[0];
	if (file.size > filesizeLimit) {
		alert("ファイルサイズ上限は5MBです。");
		fileInput01.value = "";
	    	return;
	}else{
		var file = e.target.files[0];
		var blobUrl = window.URL.createObjectURL(file);
		$('#image01-preview').attr('src', blobUrl);
	}
}, false);	

// 2個目のアップローダ
var fileInput02 = document.getElementById('image02');
fileInput02.addEventListener('change', function(e){
	var file = e.target.files[0];
	if (file.size > filesizeLimit) {
		alert("ファイルサイズ上限は5MBです。");
		fileInput02.value = "";
	    	return;
	}else{
		var file = e.target.files[0];
		var blobUrl = window.URL.createObjectURL(file);
		$('#image02-preview').attr('src', blobUrl);
	}
}, false);	

……………………以下全50個

});

こんな風に同様のコードが長く続いてしまうのですが、
スマートに1つにまとめる事は可能でしょうか？

// 理想: IDを処理内でも使いたい
var fileInput = document.getElementById(xxxxxxxxxxx);
fileInput.addEventListener('change', function(e){
	var file = e.target.files[0];
	if (file.size > filesizeLimit) {
		alert("ファイルサイズ上限は5MBです。");
		fileInput.value = "";
	    	return;
	}else{
		var file = e.target.files[0];
		var blobUrl = window.URL.createObjectURL(file);
		$('#'+xxxxxxxxxxx+'-preview').attr('src', blobUrl);
	}
}, false);

ID名の配列を作ってfor文で回してもaddEventListenerが反応しませんでした。

基本的にすべてのフォームで同様の処理（ファイルサイズチェック、#ID-previewのsrc変更処理、その他諸々）でOKです。
対策をご教示いただければ嬉しいです。

Answer 1

jQueryですよね？

$(':file').on('change',function(){

とかで処理すればよいのでは？

Comments

[yambejp]

「$('#image01-preview')」についてもクラスを指定しておいてインデックスで
紐付けするとか、type=fileにカスタムデータで対象を振っておくとかで
イケルと思います

[risektj]

ご回答ありがとうございます。

その場合、changeしたフォームのIDの入力値の操作と
ID.value = "";

$('#'+ID+'-preview').attr('src', blobUrl);
の部分に使用するIDの抽出は可能でしょうか？

[yambejp]

>changeしたフォームのID

ソースが中途半端にしか提示されていないのでなんとも言えませんが
$(this).attr('ID')
的な参照でいけるのでは？

[risektj]

補足ありがとうございます。
試しに書いてみたのですが、

$(':file').on('change',function(e){
var fileId = $(this).attr('id');
console.log(fileId);
, false);

が出力されない様です。書き方が間違えているでしょうか？

[yambejp]

$(':file').on('change',function(e){
var fileId = $(this).attr('id');
console.log(fileId);
});

では？

[risektj]

ありがとうございますm(__)m
うまく動作しました。助かりました！
お手数おかけいたしました。。