4

tengo un formulario que utilizo para subir un archivo excel al servidor, el input submit siempre está disponible y hay problemas de duplicidades ya que no se diferencia cuando está subiendo el archivo, es decir, puedo pulsar el botón mientras está subiendo un excel y la subida del archivo se duplica.

Me gustaría, utilizando JavaScript, que mientras se sube el archivo este input permaneciese inactivo y al finalizar la subida que vuelva a reactivarse.

os dejo por aquí el ejemplo que tengo:

    <strong>Excel uploader</strong>
    </p>
    <p>Por favor seleccione el archivo excel(.xls) que desea subir.</p>
</div>
  <form class="aui" method="POST" enctype="" >
  <div class="field-group">
  <label for="select-example">Proyecto:</label>
   <select class="select" id="select" name="select">
   #foreach($entry in $projects)

     <option value="$entry.getKey()">$entry.getName()</option>

   #end
   </select>
   </div>
      <fieldset>
              <legend><span>File upload</span></legend>
              <div class="field-group">
                  <label for="file-upload-example">Subir archivo Excel:</label>
                  <input class="upfile" type="file" id="file" accept="" name="file">
              </div>
          </fieldset>
    <div class="buttons-container">
      <div class="buttons">
        <input class="button submit" type="submit" value="Subir" />
        <a class="cancel" href="">Cancelar</a>
      </div>
      </div>
    </form>

Gracias, un saludo.

2 respuestas 2

3

Puedes realizar la subida del archivo por ajax, desactivar el boton y cuando se realice el ajax que se vuelva a activar

$('#boton').on('click',function () {
    $(this).prop( "disabled", true);
    $.ajax({
        url: 'ajax/subidaexcel.php',
        type: 'POST',
        data: { data :data }
    }).done(function(result) {
        $(#boton).prop( "disabled", false);
    });
});

o bien puedes comprobar dentro del ajax o php con el que insertes los datos en la base de datos que los datos no tenga duplicidad, por fecha, código... ya depende de lo que quieras subir. Es lo mas recomendable ya que así no duplicaras datos aunque pulses después de realizar la acción

-1

Para deshabilitar el botón tienes la propiedad disabled, con jQuery es sencillo: $('button').prop('disabled', true), y para activarlo lo mismo pero false.

Tan solo necesitas desactivarlo cuando se presiona el botón y reactivarlo en el callback de tu llamada a la acción.

function esperaUnSegundo($boton) {
    $boton.prop('disabled', true);

    // Sustituye esto por la función que se ejecuta cuando el archivo termina de enviarse.
    setTimeout(() => {
        $boton.prop('disabled', false);
    }, 1000);
}

$('button').on('click', function() {
    esperaUnSegundo($(this));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="boton-formulario">Botón</button>

También puedes tener un spinner escondido y mostrarlo cuando haga falta, u ocultar el botón y poner el spinner. Lo que veas. Para eso puedes usar la función hide de jQuery y luego show. Ex: $('button').hide() y $('button').show():

function esperaUnSegundo($boton) {
    $boton.prop('disabled', true);
    $('img').show();

    setTimeout(() => {
        $boton.prop('disabled', false);
        $('img').hide();
    }, 1000);
}

$('button').on('click', function() {
    esperaUnSegundo($(this));
});
img {
    display: none;
    width: 128px;
    height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="boton-formulario">Botón</button>
<img src="https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif">

5
  • ¿Cómo sería si la acción tarda más de un segundo (o más que un tiempo concreto)?
    – Alvaro Montoro
    el 6 jun. 2019 a las 11:34
  • @AlvaroMontoro Lo que tengo arriba son ejemplos, en la respuesta digo "Tan solo necesitas desactivarlo cuando se presiona el botón y reactivarlo en el callback de tu llamada a la acción". En mi ejemplo el callback es el setTimeout, pero el OP tendrá que ver dónde está su callback. No sé cómo está haciendo él la subida del archivo, así que no puedo poner un ejemplo concreto para él. La pregunta principal parece ser cómo ocultar y mostrar de nuevo. Pues mi respuesta responde a eso.
    – ArianJM
    el 6 jun. 2019 a las 12:23
  • El callback de una llamada ajax? No has comentado nada de dicha llamada, si es mediante el submit la página se refrescara. Ademas de que si la llamada dura mas de 1 segundo en tu ejemplo seguiría pasando lo mismo. Es bastante confuso que pongas un código irrelevante como ejemplo. Ademas de que has añadido JQuery solo para cambiar el boton a disabled.
    – x3k
    el 6 jun. 2019 a las 12:43
  • @Parra que sea o no sea AJAX está fuera de lugar. El OP no ha dicho nada de AJAX. Mi ejemplo muestra cómo se deshabilita un botón, y cómo se puede rehabilitar después de un rato. Que haya otros ejemplos más convenientes para la pregunta concreta, puede ser. Pero estoy respondiendo a la pregunta.
    – ArianJM
    el 6 jun. 2019 a las 15:20
  • Gracias por las respuestas compañeros. Estoy pensando una alternativa y es que el input submit dependa del input upfile. Si en input upfile hay valor (quiere decir que hay un archivo excel para subir) que me permita pulsar el botón, si no existe archivo cargado que se deshabilite.
    – Mengano
    el 6 jun. 2019 a las 15:43

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.