0

Tengo el siguiente código Javascript, lo cual declaro 2 parámetros file_input, id. Como resultado obtengo, al subir una imagen el icono se pinta de color, si quito la imagen se quita el color del icono. Pero tengo un problema de que el length no esta definido, ¿Me pueden ayudar a resolver este problema?, Porfavor.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

    function detectFile(file_input, id) {
        if (file_input.files.length > 0) {
            $('#icon_upload' + id).addClass("green-text");
        } else{
            $('#icon_upload' + id).removeClass("green-text");
        }
    }
</script>

Html

<div class="col-12">
 <input type="file" id="foto1" name="foto1" accept="image/png, .jpeg, .jpg, image/gif;capture=camera" class="input-foto" requered onchange="detectFile(this, 1)"  value="{{foto1_ret}}" >
<label id="input_foto1" class="border rounded col-12 label-foto" for="foto1">
 <i class="fa fa-camera-retro icon_base" id="icon_upload1"></i> Foto 1</label>
</div>

Dejo una Imagen igual del html.

introducir la descripción de la imagen aquí Se los Agradecería un Monton

2
  • Edité tu pregunta para poder ejecutar el código aquí (con fragmento de código) y funciona correctamente. Sería conveniente que agregues información del navegador que estás usando, así como otras librerías Javascript (aparte de jQuery).
    – Triby
    el 9 oct. 2020 a las 17:05
  • Woow gracias, veré como se hace para ejecutar el o los códigos aquí.. :)
    – Jorge Toro
    el 9 oct. 2020 a las 21:18

1 respuesta 1

1

El error se produce porque estás llamando la función detectFile() cuando se carga la página. Y como todavía no se ha elegido un archivo entonces file_input es undefined.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

    function detectFile(file_input, id) {
        if (file_input.files.length > 0) {
            $('#icon_upload' + id).addClass("green-text");
        } else{
            $('#icon_upload' + id).removeClass("green-text");
        }
    }
    
 window.addEventListener("load",function(){
    detectFile($('#foto1'),1); // aquí está el error.
 });
</script>

Html

<div class="col-12">
 <input type="file" id="foto1" name="foto1" accept="image/png, .jpeg, .jpg, image/gif;capture=camera" class="input-foto" requered onchange="detectFile(this, 1)"  value="{{foto1_ret}}" >
<label id="input_foto1" class="border rounded col-12 label-foto" for="foto1">
 <i class="fa fa-camera-retro icon_base" id="icon_upload1"></i> Foto 1</label>
</div>

3
  • En parte es correcta tu respuesta, pero el error principal es la forma de evaluar, debería ser: $(file_input).val() == '' para saber si se seleccionó un archivo, porque no tiene el atributo multiple o, en todo caso: $(file_input).get(0).files.length > 0
    – Triby
    el 9 oct. 2020 a las 17:27
  • 1
    Eso depende del contexto. En el caso actual la función está vinculada con el evento onchange, eso asegura que files no será undefined, posiblemente llamarla en el load de la página sea un error. En caso no lo sea, como dices, hay que cambiar la forma de validación. Agrego otra usando encadenamiento opcional: file_input.files?.length > 0
    – Lobos
    el 9 oct. 2020 a las 18:02
  • Muchas Gracias, por sus respuestas a todos Masters del Javascript. Problema Solucionado $(file_input).get(0).files.length > 0
    – Jorge Toro
    el 14 oct. 2020 a las 12:46

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.