Tengo un pequeño formulario donde envió 4 imágenes que después de enviarlas las convierto en un array para hacer un proceso de reducción de peso, todo bien hasta aquí, pero ahora lo que necesito es antes que se envíen a ese proceso de reducción de peso valide que sean imágenes y que el peso sea menor a 2mb (esto aun no lo tengo) con JS.
<div class="wrap-input100 rs1-wrap-input100">
<span class="label-input100">IFE PARTE DELANTERA*</span>
<input class="input100" type="file" name="imagen[]" id="imagen" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 rs1-wrap-input100">
<span class="label-input100">IFE PARTE POSTERIOR*</span>
<input class="input100" type="file" name="imagen[]" id="imagen" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 rs1-wrap-input100">
<span class="label-input100">COMPROBANTE DE DOMICILIO*</span>
<input class="input100" type="file" name="imagen[]" id="imagen" required>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 rs1-wrap-input100">
<span class="label-input100">OTRO *</span>
<input class="input100" type="file" name="imagen[]" id="imagen" required>
<span class="focus-input100"></span>
</div>
Tengo este pequeño Script donde me valida que es una imagen pero este solo me funciona con el primer input de tipo imagen, cuando selecciono una imagen en cualquiera de los otros 3 inputs no me hace la validación, me imagino que se tendría que hacer un ciclo pero aun soy muy novato en JS.
<script>
$("#imagen").change(function() {
var file = this.files[0];
var imagefile = file.type;
var match = ["image/jpeg", "image/png", "image/jpg"];
/* var fileSize = $("#filename")[0].files[0].size;
var siezekiloByte = parseInt(fileSize / 1024); */
if (
!(imagefile == match[0] || imagefile == match[1] || imagefile == match[2])
) {
alert("Favor de escoger una imagen en formato (JPEG/JPG/PNG).");
$("#imagen").val("");
return false;
}
/* if (siezekiloByte > $("#filename").attr("size")) {
alert("Imagen muy grande");
$("#filename").val("");
return false;
} */
});
</script>