2008-09-25 6 views

Respuesta

32

Echa un vistazo a SWFUpload, que es esencialmente una API JavaScript para capacidades de manejo de carga de archivos absolutamente superior de flash. Lo mejor que hay hasta que los navegadores finalmente se pongan al día.

De enlace:

  • cargar varios archivos a la vez ctrl/shift-selección en el diálogo
  • devoluciones de llamada de JavaScript en todos los eventos
  • Obtener información de archivo antes de subida comienza carga
  • Estilo elementos con XHTML y css
  • Mostrar información mientras se cargan los archivos con HTML
  • No es necesario recargar la página
  • Funciona en todas las plataformas/navegadores compatibles con Flash.
  • degrada con gracia a la forma normal de subida HTML si Flash o Javascript no está disponible
  • tamaño del archivo de control antes de que comience carga
  • Sólo mostrar tipos de archivos seleccionados en el diálogo
  • archivos de cola, quitar/añadir archivos antes de iniciar la carga

Demos

----- ---- carga iframe -

Para empezar, quiere tener un iframe en su página. Esto es para la comunicación del servidor. Lo esconderás más tarde, pero por ahora, mantenlo visible. Dale a ese iframe un atributo de nombre, como "uploader" o algo así.

Ahora, en su forma, establezca el destino al nombre del iframe y la acción a un script que tenga en el servidor que acepte una carga de archivo (como un formulario normal con una carga de archivo). Agregue un enlace dentro de ese formulario con el texto "Agregar archivo". Establezca ese enlace para ejecutar una función de JavaScript que agregará una nueva entrada al formulario. Esto se puede hacer a través del DOM, pero recomendaría una biblioteca de JavaScript como jquery.

Una vez que se agrega la nueva entrada de archivo al formulario, establezca el evento de desenfoque de esa entrada a una función de javascript que enviará el formulario y luego lo revisará periódicamente para su salida. Leer un iframe puede ser complicado, pero es posible.

Haga que la salida del script de carga de archivos sea "Listo". o un nombre de archivo o algo cuando la carga se completa.

Compruébelo cada segundo o menos hasta que haya contenido. Una vez que tenga contenido, elimine su temporizador y reemplace la entrada del archivo con el nombre del archivo (o "Archivo cargado") o lo que sea.

Oculte su iframe con css.

11

De YUI! (Interfaz de usuario Yahoo), https://yuilibrary.com/yui/docs/uploader/

  1. la selección de múltiples archivos en un único cuadro de diálogo "Abrir archivo".
  2. Filtros de extensiones de archivos para facilitar la selección del usuario.
  3. Seguimiento de progreso para cargas de archivos.
  4. Un rango de metadatos de archivo: nombre de archivo, tamaño, fecha de creación, fecha de modificación y autor.
  5. Un conjunto de eventos distribuidos en varios aspectos del proceso de carga de archivos: selección de archivos, progreso de carga, finalización de carga, etc.
  6. Inclusión de datos adicionales en la solicitud POST de carga de archivos.
  7. Subida de archivos más rápida en conexiones de banda ancha debido al tamaño modificado del búfer de ENVÍO.
  8. Respuesta del servidor de la misma página al finalizar la carga del archivo.

totalmente gratis

+0

Esto requiere Flash para funcionar, pero es una solución viable. –

+1

No entiendo por qué eso equivaldría a un voto negativo. el OP nunca especificó que el flash no está permitido. – enobrev

+2

No sé por qué rechazarías a alguien por esto. Obviamente, el desarrollador que decida usar un componente que requiera Flash debería saber que esta herramienta podría limitar los pocos usuarios que no la tienen instalada y que debería proporcionar una alternativa en esos casos, pero de lo contrario esta es una buena respuesta –

0

me gustaría un poco más de clarificación de la carga de archivos "Gmail-like".

¿Quiere decir cómo si se asienta un poco, automáticamente lo une a un calado?

+0

Creo que sería una buena idea si el OP aclara qué pasa con la carga del archivo GMail que le gusta y está buscando .... –

0

código de Gmail es difícil de encontrar su camino alrededor, pero si tuviera que adivinar, esto es como funciona:

  • Al hacer clic en "adjuntar otro archivo", se inserta un control de archivos de tipo de entrada regulares . En IE, también puede activar el evento click en el botón "Examinar" de forma programática para que el diálogo de archivo se abra inmediatamente (no hace esto en Firefox, y no tengo IE práctico, pero creo que IE lo permite)
  • Después de seleccionar un archivo, este detecta el evento de cambio del control de entrada e inicia un temporizador.
  • Cuando se dispara el temporizador, separa el elemento de entrada del formulario y lo agrega a una forma diferente en un iframe oculto, colocando un enlace simple en la forma principal (visible). El iframe oculto se envía para cargar el archivo. (También se puede clonar el elemento de entrada, pero no he probado si esto funciona.)
0

Usted puede utilizar iFrames para este

1

Para una solución sin flash, puede utilizar NeatUpload. Lo usé en un proyecto extenso el año pasado con un requisito de no flash. Es muy fácil de integrar en las soluciones existentes. Pensé que era muy fácil trabajar con él. Más fácil, en mi experiencia limitada, que trabajar con SWFUpload en ASP.NET. Probablemente porque NeatUpload está diseñado solo para ASP.NET.

1

¿Estás hablando de una carga sin una devolución de página de página completa? Eche un vistazo al http://www.phpletter.com/Demo/AjaxFileUpload-Demo/, que crea un iframe oculto, copia el control de entrada y usa el iframe para realizar la publicación y obtener el archivo en el servidor.

Si está buscando el comportamiento donde el usuario hace clic en "adjuntar archivo" y aparece automáticamente el cuadro de diálogo de búsqueda de archivos, puede hacerlo a través de Javascript pero no funciona en Firefox, que tiene la precaución de seguridad requiriendo que el usuario invoque directamente el botón "Examinar" (en lugar de usar el script mediante programación).

Para la carga "automática", utilice Javascript para adjuntar al evento "cambiar" para la propiedad "valor" del control de "entrada" para que funcione cuando se haya seleccionado un archivo.

4

Aquí está el gmail uploader clone. Este es el clon exacto de Gmail uploader con algunas instalaciones adicionales. Puede ver las miniaturas de las imágenes después de cargarlas, Arrastre las miniaturas para cambiar el orden y reemplazar cualquier miniatura. Se hace usando jQuery. Puede ver la demostración here. El código fuente es gratis en download in a single zip file.

Espero que pueda eliminar fácilmente algún código y obtener lo deseado. Puede dejar comentarios en el blog de ABCoder si necesita más ayuda.

1

Ahora han pasado 2 años, utilicé el uploadify en mi sistema heredado y funciona bien. pero necesitas escribir algún código de hack (como mantener la sesión).

Te recomiendo que uses jquery upload, que es puro HTML, sin swf, sin problemas de sesión y realmente genial!

== en 2013, lo que escribí:

Estoy considerando los que elegir, o SWFupload uploadify.

pero en la web oficial de SWFupload, se dice que no ha estado en desarrollo activo y el autor está esperando que algún día el SWFupload podría revivir ...

así que ... decidí probar "Uploadify", el cual parece compatible con muchas opciones, devoluciones de llamada con muchas demostraciones. (Después de verificar su código fuente, supongo que el autor ajusta el "SWFupload v1" y "SWFupload v2" en su "uploadify v3" ...)

y hay una lista completa de this kind of uploaders.

Cuestiones relacionadas