1

Estamos realizando un sistema web de registro de mascotas y queremos que al momento de registrar la mascota debe de incluir una foto de la mascota, nos gustaría nos ayuden con la validación de esa foto, quiere decir que ese campo debe no debe de estar vació y las extensiones como .jpg, .png

<div class="form-row">
   <div class="form-group col-12 col-md-12">
     <label for="foto-can">Foto de la mascota</label>
     <div class="custom-file">
       <input                          
       type="file"
       class="custom-file-input"
       id="fotoMascotaRegistra"                                                                            
       />
       <label
       class="custom-file-label"
       for="customFileLangHTML"
       data-browse="Elegir archivo"
       >* Seleccionar una foto</label>
     </div>
   </div>
 </div>

2 respuestas 2

4

Para aceptar tipos en el input file puedes usar el atributo accept, y para forzar que ingresen algo el required, por ejemplo:

<input type="file" id="fotoMascotaRegistra" class="custom-file-input" accept="image/x-png,image/gif,image/jpeg" required/>
3
  • Me gustaría en javascript el 12 sep. 2019 a las 21:20
  • @JuanCastro no hace falta javascript para hacer la validación, a menos que estés buscando previsualizar la imagen o algo así. el 12 sep. 2019 a las 22:00
  • 1
    @the-breaker tiene razón, personalmente también uso js si necesito previsualizar o validar tamaño de la imagen, en otro caso el mismo html resuelve.. el 13 sep. 2019 a las 0:09
3

Creo que algo así es lo que buscas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <label>Foto de la mascota:</label>
    <input type="file" id="imgMascota" />

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
            $("#imgMascota").change(function(){
                let input = $(this);
                let extencion = input.val().split(".").pop().toLowerCase();
                if( input.val() != "" ){
                    if( extencion != "jpg" && extencion != "png" ){
                        input.replaceWith(input.val('').clone(true));
                        alert("imagen no permitida");
                    }
                }else{
                    alert("favor de cargar una imagen");
                }
            });
         });
     </script>
</body>
</html>

2
  • La respuesta parece funcionar, pero debes agregar mas información para mejorar la calidad. el 13 sep. 2019 a las 0:14
  • Muchas gracias... el 13 sep. 2019 a las 17:24

Tu Respuesta

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

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