1

Buenos días, estoy intentando mostrar y ocultar el botón delete si el file esta vacío o no y no sé muy bien como hacerlo, creo que es cun un display show y hide, pero no estoy seguro

HTML

<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
    <label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px;  border-radius: 100px;cursor: pointer;">
        <span class="iborrainputfile" style="margin-left: 27px;">ATTACH FILE</span>
    </label>
    <span id="fichero_seleccionado" style="font-size: 14px; margin-left: 160px; margin-top: -33px; position: absolute;"></span>
    <input type="file" name="carta_nominador" id="carta_nominador" class="validaCarta inputfile inputfile-1">

    </div>

    <script>
        $("#carta_nominador").change(function(){
            var fichero_seleccionado = $(this).val();
            var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\\]/, ''); //Eliminamos el path hasta el fichero seleccionado

            $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
        });
    </script>

    <div class="boton" style="width:110px; margin: -45px 0 5px 600px;"><a href="#" id="delCarta" style="position: absolute; color: #fff;text-decoration: none;text-transform: uppercase;margin-top: 15px;margin-left: -25px;">Delete</a></div>

JQUERY

$('#delCarta').click(
        function(){
            clearFileInputField('carta_nominador_div');
            clearNameFile('fichero_seleccionado');
            $("#carta_nominador").change(function(){
                var fichero_seleccionado = $(this).val();
                var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\\]/, ''); //Eliminamos el path hasta el fichero seleccionado

                $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
                            });
                        }
                    );
                });
                function clearNameFile(tagId) {
                    //document.getElementById(tagId).textContent = "";
                    $("#"+tagId).text("");
                }
                function clearFileInputField(tagId) {
                    document.getElementById(tagId).innerHTML = 
                                    document.getElementById(tagId).innerHTML;
                }

Cómo podría hacer que esté oculto el botón DELETE y cuando se seleccione un archivo se muestre el botón?

Muchas gracias

2 respuestas 2

1

Podrías empezar con el botón oculto (añadiéndole una clase invisible que tenga display:none)

<a href="#" id="delCarta" class="invisible" style="position: absolute; color: #fff;text-decoration: none;text-transform: uppercase;margin-top: 15px;margin-left: -25px;">Delete</a>

y en el evento change de #carta_nominador verificar si el contenido es no vacío para quitar o añadir la clase invisible

   $("#carta_nominador").change(function(){
        var fichero_seleccionado = $(this).val();
        var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\\]/, ''); 

        if(nombre_fichero_seleccionado==='') {
           $('#delCarta').addClass('invisible');
        } else {
           $('#delCarta').removeClass('invisible'); 
        }

        $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
    });
1
  • Muchas gracias, ya me funcionó
    – derek
    Commented el 8 nov. 2017 a las 12:04
1

Puedes crear una variable booleana, que controlará la visibilidad del botón. De entrada esta variable será true, para iniciar el botón desactivado. Y cambiará en el on.change del botón que selecciona los archivos.

Dicha variable será false únicamente cuando haya un archivo seleccionado y cambiará entonces el estado del botón Delete.

Notas:

  • Las buenas prácticas recomiendan encerrar todo lo relativo al DOM dentro de function... hay que tener en cuenta que document.ready es obsoleto desde jQuery 3.
  • El uso de prop es recomendado, con respecto al uso de attr.
  • Viendo que en tu HTML aplicas estilos directamente, comentarte que no es una buena práctica colocar estilos directamente en los elementos HTML, se recomienda dar a esos elementos nombres de clases y aplicar los estilos vía CSS. De ese modo, los elementos son más independientes y si quieres cambiar el estilo sólo tienes que modificar el CSS sin tener que buscar todos los elementos HTML para actualizarlos.

/*Se recomienda encerrar todo el código del DOM en function*/
$(function() {
  var bolDisabled = true;
  $('#btnDelete').prop('disabled', bolDisabled);

  $('#carta_nominador').on("change", function() {
    var inputVal = $(this).val();
    if (!inputVal == '') {
      var bolDisabled = false;
    }
    $('#btnDelete').prop('disabled', bolDisabled);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="fichero_seleccionado" style="font-size: 14px; margin-left: 160px; margin-top: -33px; position: absolute;"></span>
<input type="file" name="carta_nominador" id="carta_nominador" class="validaCarta inputfile inputfile-1">
<hr />
<button id="btnDelete">Delete</button>


P.D.: Sobre lo comentado más arriba sobre document.ready puedes ver la siguiente pregunta:

Pero es muy importante no confundir document.ready con window.load. Son dos cosas muy diferentes. Si hay dudas sobre las diferencias entre ambas, puedes consultar la respuesta a esta pregunta:

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.