subir pagina funcion ejecutar efecto despues con cargar cargando carga asincrona archivo antes javascript django http file-upload websocket

funcion - ejecutar javascript despues de cargar pagina



¿Cuál es la mejor manera de cargar archivos en un navegador moderno? (5)

Quiero subir un archivo (único) a un servidor y mostrar el progreso de la carga.

Sé que puedo cargar un archivo usando HTTP POST. No estoy familiarizado con los sockets web, pero según tengo entendido, los datos binarios también se pueden enviar de esa manera y, dado que los sockets web son bidireccionales, podría obtener el progreso de la carga.

No me preocupan los navegadores antiguos, por lo que las soluciones de iframe y flash no son muy atractivas a menos que haya una ventaja significativa en esa ruta.

También tengo curiosidad sobre la mejor tecnología del lado del servidor. ¿Son sus ventajas usar un servidor WSGI como Django? ¿O tal vez la tecnología de E / S sin bloqueo como Node.js? No estoy preguntando si el marco web x es mejor que el marco web y, o el servidor x es mejor que el servidor y. Pero simplemente lo que debería tener la tecnología ideal para facilitar las cargas en el cliente.

Actualización : Parece que el lado del servidor no tiene relación con las tecnologías / API disponibles en el cliente para facilitar las cargas.

Los archivos se pueden cargar a través de AJAX.

Use el complemento de formulario jQuery . Hace todo el trabajo sucio de vincular los archivos al formulario y serializarlo. También es capaz de mostrar el progreso de carga.

La pila del servidor no tiene mucho que ver con eso.

Demo

Mi respuesta es bastante tarde, pero aquí va:

Respuesta corta:

XMLHttpRequest es la mejor manera de cargar archivos en un navegador moderno.

¿Qué es XMLHttpRequest?

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google. Ahora está estandarizado en el W3C . Proporciona una manera fácil de recuperar datos de una URL sin tener que actualizar la página completa. Una página web puede actualizar solo una parte de la página sin interrumpir lo que el usuario está haciendo. XMLHttpRequest se usa mucho en la programación AJAX .

A pesar de su nombre, XMLHttpRequest se puede utilizar para recuperar cualquier tipo de datos, no solo XML , y admite protocolos distintos de HTTP (incluidos archivos y ftp ).

El objeto XMLHttpRequest ha recibido un lavado de cara en las especificaciones Html5 . Específicamente el XMLHttpRequest Nivel 2 .

Ventajas:

  • Manejo de flujos de bytes como objetos File , Blob y FormData para cargar y descargar
  • Eventos de progreso durante la carga y descarga
  • Solicitudes de origen cruzado
  • Permitir hacer una solicitud anónima , es decir, no enviar HTTP Referer
  • La capacidad de establecer un tiempo de espera para la solicitud
  • La carga se realiza en segundo plano.
  • La página en la que se encuentra el usuario permanece intacta.
  • No requiere ningún cambio en el lado del servidor , por lo que la lógica del lado del servidor existente debe permanecer sin cambios, lo que hace que adaptar esta tecnología sea mucho más fácil.

El evento de progreso Html5:

Según la especificación de Eventos de progreso Html5 , el evento de progreso Html5 proporciona, entre otros, la siguiente información:

total - Total bytes being transferred loaded - Bytes uploaded thus far lengthComputable - Specifies if the total size of the data/file being uploaded is known

Usando la información anterior, es bastante fácil proporcionar la información de "Tiempo restante" al usuario.

Mantener informado al usuario:

Información sobre el archivo que puede ponerse a disposición del usuario:

  1. Nombre del archivo
  2. Tamaño del archivo
  3. Tipo MIME
  4. Una barra de progreso con porcentaje completado
  5. La velocidad de carga o el ancho de banda de carga
  6. El tiempo aproximado restante
  7. Los bytes cargados hasta ahora
  8. Una respuesta del lado del servidor

Carga de archivos usando la demostración XMLHttpRequest

Por favor, consulte " Carga de archivos usando Html5 con demostración de indicación de progreso " para ver un ejemplo. Todo el código JavaScript requerido está en la página pero no se incluye CSS. Por razones de seguridad, los tipos de archivo están limitados a jpg, png, gif y txt. El tamaño máximo del archivo es de 2 MB.

Compatibilidad del navegador XMLHttpRequest:

Personalmente, me gusta el complemento Blueimp jQuery File Upload ( https://blueimp.github.io/jQuery-File-Upload/ )

Widget de carga de archivos con selección múltiple de archivos, soporte para arrastrar y soltar, barras de progreso, validación y vista previa de imágenes, audio y video para jQuery. Admite cargas de archivos entre dominios, fragmentados y reanudables y cambio de tamaño de imagen del lado del cliente. Funciona con cualquier plataforma del lado del servidor (PHP, Python, Ruby on Rails, Java, Node.js, Go, etc.) que admita cargas estándar de archivos de formulario HTML.

Población:

Descargar (GitHub): https://github.com/blueimp/jQuery-File-Upload

Editar (2017-10-17): a partir de ahora, también existe la opción de usar Fetch API . Ofrece esencialmente las mismas capacidades que XMLHttpRequest detrás de una API más moderna basada en promesas. Hay un polyfill para navegadores que no admiten window.fetch() forma nativa (que actualmente es principalmente Internet Explorer y versiones anteriores de Safari).

XMLHttpRequest vs. Sockets web vs. Algo más

Claramente XMLHttpRequest . Sus capacidades en los navegadores modernos son enormes y cubren casi todos los escenarios. Producirá una solicitud POST o PUT estándar, cualquier servidor web y combinación de framework puede manejar eso.

Si bien los sockets web son buenos para algunos escenarios, es un protocolo diferente que agrega mucha complejidad: solo vale la pena usarlos si necesita respuestas en tiempo real del servidor. Y como usted mismo notó, otros enfoques como Flash son simplemente trucos feos.

Enviar datos binarios

Normalmente, no tendrá acceso directo a los archivos. Entonces tendrá un campo de formulario <input type="file"> en algún lugar de su página y esperará a que el usuario elija un archivo. Las opciones entonces son:

  • Enviar solo el contenido del archivo: request.send(input.files[0]) . El cuerpo de la solicitud será el contenido del archivo y nada más, no se realizará ninguna codificación y no se transmitirán metadatos como el nombre del archivo. Compatibilidad del navegador : Chrome 7, Firefox 3.6, Opera 12, IE 10.
  • Envío de los datos de todo el formulario : request.send(new FormData(input.form)) . Aquí, el contenido del formulario se codificará como multipart/form-data , lo que significa que puede enviar múltiples campos de formulario y también se transmitirán metadatos como campos y nombres de archivos. También puede modificar el objeto FormData antes de enviarlo. Dependiendo del marco del lado del servidor, manejar esta solicitud puede ser más simple que los datos sin procesar, por lo general, hay muchos ayudantes que puede usar. Compatibilidad del navegador : Chrome 6, Firefox 4, Opera 12, IE 10.
  • Envío de una matriz escrita : en caso de que no tenga un archivo pero simplemente desee enviar algunos datos binarios que genere sobre la marcha. Aquí no se realiza ninguna codificación adicional, por lo que, en lo que respecta al lado del servidor, esto funciona como enviar el contenido del archivo. Compatibilidad del navegador : Chrome 9, Firefox 9, Opera 11.60, IE 10.

Mostrar progreso de carga

Puede escuchar eventos de progress en XMLHttpRequest.upload . Los eventos de progress tienen propiedades loaded y total que permiten determinar qué tan lejos ha llegado con su solicitud. Compatibilidad del navegador : Chrome 7, Firefox 3.5, Opera 11.60, IE 10.

Bibliotecas JavaScript

Por supuesto, hay bibliotecas existentes que envuelven la funcionalidad descrita aquí. Estos se mencionan en otras respuestas, la búsqueda en la web ciertamente aparecerá aún más. Explícitamente no quiero proponer ninguna biblioteca aquí, cuál de ellas, si es que debe usar, es puramente una cuestión de preferencia.