Tengo varias entradas en la misma página con el tipo "archivo", pero solo funciona la primera. Tengo una img de "vista previa" donde aparecerá el archivo cargado. No quiero usar identificaciones únicas y no estoy seguro de cómo usar las clases si ese es el problema. También intenté crear dinámicamente los divs con JS pero no mejoré. Código abierto a continuación. Mi objetivo es hacer que todas las entradas funcionen. https://codepen.io/pfbarnet/pen/VwMgmbP

 var fileTag = document.querySelector("#filetag"), preview = document.querySelector("#preview"); if (fileTag) { fileTag.addEventListener("change", function () { changeImage(this); }); } function changeImage(input) { var reader; if (input.files && input.files[0]) { reader = new FileReader(); reader.onload = function (e) { preview.setAttribute("src", e.target.result); }; reader.readAsDataURL(input.files[0]); } } <input type='file' id= 'filetag' class='file-chooser'><img src='' id='preview'/></input> <input type='file' id= 'filetag' class='file-chooser'><img src='' id='preview'/></input> <input type='file' id= 'filetag' class='file-chooser'><img src='' id='preview'/></input>