2

Resulta que tengo una función que sube una imagen al servidor, pero a veces tarda demasiado y me gustaría poder cancelar dicha función mediante un botón de cancelar.

$('#imageUploadForm').on('change',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

¿Cómo podría detenerla el usuario con un click?

2
  • Lo que quieres es interrumpir el envío del ajax? Commented el 29 nov. 2016 a las 22:16
  • Para el código del evento (la función) y el envío de Ajax, o sea que cancele todo lo referente a ese script. Pero sólo ese, porque tengo otros activos que tendrían que seguir en ejecución. Pero ese en concreto a veces si la imagen pesa demasiado, demora mucho y me gustaría que el usuario tuviese la opción de cancelarlo y seguir haciendo otras cosas.
    – PlayerWet
    Commented el 29 nov. 2016 a las 22:17

1 respuesta 1

4

Según la documentación puedes usar el método XMLHttpRequest.abort() para interrumpir la solicitud.

Pero una vez enviada no se puede parar en realidad la solicitud, ósea lo que haces es parar del lado cliente pero el proceso en el servidor continua.

Deberías enviar otra solicitud aparte al servidor, para que interrumpa lo que esta haciendo o lo mejor sería ignorar simplemente la respuesta.

Te dejo el código para abortar la solicitud de Ajax y después de 3 segundos se activan los botones otra vez de nuevo para un nuevo envío.

$(function() {
    
    var ajax = null; // iniciamos
    
    $('#imageUploadForm').on('change', (function(e) {
        
        // resto de código
        
        // pasamos el objeto 
        ajax = $.ajax({
            // código
        });
    }));   
    
    $('#cancel').on('click', function() {
        
        var $this = $(this);
        
        // Descomentar siguiente linea en tu projecto
        // Para evitar error read property 'abort' of null" 
        // if (ajax != null) {
            
            // desactivamos seleccionar archivo
            $('.sending').prop({ 'disabled': true });
            
            $this.text("Abortando envio...");
            
            setTimeout(function() {
                
                $this.text("Cancelar Envio");
                $('.sending').prop({ 'disabled': false });
                
            }, 3000);      
              
            ajax.abort();
            ajax = null;        
      
        // Descomentar siguiente linea en tu projecto
        //}
    });
});
<form method="post" enctype="multipart/form-data">    
  <input class="sending" id="imageUploadForm" type="file">
  <input class="sending" type="submit">
</form>
<br>
<button class="sending" id="cancel">Cancelar Envio</button>  
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

6
  • Pero el servidor lo que verá será un mensaje json mal formado y lo desechará, ¿no? El único problema sería que queda una conexión colgada, esperando el timeot, ¿o me equivoco?
    – SJuan76
    Commented el 29 nov. 2016 a las 22:54
  • 1
    Si llega mal o bien formado eso ya tiene que preocuparse el script del lado del servidor... por eso dije tambien que si quiere parar la solicitud tiene que enviar otra solicitud y limpiar... pero creo que lo mejor es ignorar... ósea ni abortar solo que no muestre el resultado.... Commented el 29 nov. 2016 a las 22:59
  • 1
    Lo puedes activar otra vez si quieres.... deja me un minuto Commented el 29 nov. 2016 a las 23:01
  • 1
    @PlayerWet - Te he cambiado el código un poco... los botones se activan después de 3 segundos otra vez de nuevo.. y se puede hacer un nuevo envío... recuerda de descomentar las lineas indicadas en tu projecto para que no arroje ningún error Commented el 30 nov. 2016 a las 0:07
  • 1
    Muchas gracias @aldanux por todo, perdón por haber tardado en contestar. Sois geniales en serio !!
    – PlayerWet
    Commented el 30 nov. 2016 a las 1:42

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.