Saltar al contenido

javascript: ¿Cómo puedo cargar archivos de forma asincrónica con jQuery?

noviembre 2, 2021
apple touch icon@2

La forma más sencilla y sólida en la que he hecho esto en el pasado es simplemente apuntar a una etiqueta iFrame oculta con su formulario; luego, se enviará dentro del iframe sin volver a cargar la página.

Eso es si no desea utilizar un complemento, JavaScript o cualquier otra forma de «magia» que no sea HTML. Por supuesto, puede combinar esto con JavaScript o lo que sea …

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

También puede leer el contenido del iframe. onLoad para errores del servidor o respuestas de éxito y luego envíelo al usuario.

Chrome, iFrames y onLoad

-nota- solo necesita seguir leyendo si está interesado en cómo configurar un bloqueador de interfaz de usuario al realizar la carga / descarga

Actualmente, Chrome no activa el evento onLoad para el iframe cuando se usa para transferir archivos. Firefox, IE y Edge activan el evento onload para transferencias de archivos.

La única solución que encontré que funciona para Chrome fue usar una cookie.

Para hacer eso básicamente cuando se inicia la carga / descarga:

  • [Client Side] Iniciar un intervalo para buscar la existencia de una cookie
  • [Server Side] Haga lo que necesite con los datos del archivo
  • [Server Side] Establecer cookie para el intervalo del lado del cliente
  • [Client Side] Interval ve la cookie y la usa como el evento onLoad. Por ejemplo, puede iniciar un bloqueador de IU y luego onLoad (o cuando se crea una cookie) elimina el bloqueador de IU.

Usar una cookie para esto es feo pero funciona.

Hice un complemento jQuery para manejar este problema para Chrome durante la descarga, puede encontrarlo aquí

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

El mismo principio básico se aplica también a la carga.

Para usar el descargador (incluye JS, obviamente)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

Y en el lado del servidor, justo antes de transferir los datos del archivo, cree la cookie

 setcookie('iDownloader', true, time() + 30, "http://stackoverflow.com/");

El complemento verá la cookie y luego activará la onComplete llamar de vuelta.

close