1

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>

2 respuestas 2

1

Te faltaba poco para lograr el objetivo, el problema estaba en esta comparación if (siezekiloByte > $("#filename").attr("size")), porque los campos de archivo no incluyen el atributo size y, en todo caso, correspondería a algo que debería interpretar el navegador y no al archivo seleccionado.

Lo que debes hacer es crear una variable para establecer el peso máximo permitido y comparar contra el tamaño de archivo seleccionado. Hice algunos cambios:

  1. Con la misma función se van a verificar todos los archivos
  2. Cambié el nombre de algunas variables para reflejar mejor el contenido
  3. Agregué la variable para establecer el peso máximo permitido, aunque se puede poner directamente en el if, pero es más fácil localizar si está al inicio de la función
  4. En lugar de comparar cada tipo de archivo se verifica si existe en el arreglo match

// Escuchar cambios en todos los campos con nombre imagen[]
$('[name="imagen[]"]').change(function() {
    // Establecer peso máximo (2048 kbytes / 2mb)
    var maxSize = 2048;

    var file = this.files[0];
    var imageType = file.type;
    var match = ["image/jpeg", "image/png", "image/jpg"];

    var fileSize = file.size;
    var sizeKilo = parseInt(fileSize / 1024);
    if(!match.includes(imageType)) {
        alert("Favor de escoger una imagen en formato (JPEG/JPG/PNG).");
        // Se usa this para restablecer el campo que disparó el evento
        $(this).val("");
        return false;
    }
    // Comparar tamaño de archivo contra máximo permitido
    if (sizeKilo > maxSize) {
      alert("Imagen muy grande");
      $(this).val("");
      return false;
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

0
//metodo para validar extension input tipo file, con id : adjuntoTicket     
function valExtension() {
        const nombreArchivo = $('#adjuntoTicket').val();
        const extPermitidas = ['jpg', 'jpeg', 'png', 'pdf'];
        const ext = getFileExtension(nombreArchivo);
    
        if (!(extPermitidas.includes(ext))) {
            $(":file").filestyle('clear');
            alert('Formato de archivo no valido.');
        }
    }
    
    function getFileExtension(filename) {
      return filename.split('.').pop();
    }
1
  • 1
    esta respuesta esta incompleta, por favor explica tu funcion, agrega enlaces de apoyo o alguna informacion al respecto.
    – David081
    Commented el 27 sept. 2022 a las 17:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.