manejo - JavaScript: Subir archivo

listar archivos de una carpeta javascript

Question

Digamos que tengo este elemento en la página:

<input id="image-file" type="file" />

Esto creará un botón que permite a los usuarios de la página web seleccionar un archivo a través de un cuadro de diálogo "Archivo abierto ..." en el navegador.

Digamos que el usuario hace clic en dicho botón, selecciona un archivo en el cuadro de diálogo y luego hace clic en el botón "Aceptar" para cerrar el cuadro de diálogo.

El nombre del archivo seleccionado ahora está almacenado en:

document.getElementById("image-file").value

Ahora, digamos que el servidor maneja los POST de varias partes en la URL "/ upload / image".

¿Cómo envío el archivo a "/ upload / image"?

Además, ¿cómo escucho la notificación de que el archivo ha terminado de cargarse?

Answer 1

A menos que intente subir el archivo usando ajax, simplemente envíe el formulario a /upload/image .

<form enctype="multipart/form-data" action="/upload/image" method="post">
    <input id="image-file" type="file" />
</form>

Si desea cargar la imagen en segundo plano (por ejemplo, sin enviar el formulario completo), puede usar ajax:

• Carga de archivos asíncrona (carga de archivos AJAX) usando jsp y javascript
• jQuery Ajax Subida de archivos
• Ajax usando la carga de archivos

Answer 2

Como su creador soy parcial;) pero también podría considerar usar algo como https://uppy.io . Carga los archivos sin moverse de la página y ofrece algunas bonificaciones como arrastrar y soltar, reanudar las cargas en caso de fallas del navegador / redes escamosas e importar desde, por ejemplo, Instagram. También es de código abierto y no depende de jQuery ni nada de eso.

Answer 3

Si de hecho está buscando una forma pura de javascript para cargar una imagen, el siguiente tutorial de 2009 le dirá exactamente cómo hacerlo:

http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

Me encontré con esto cuando quería agregar autenticación básica a un envío de formulario, sin habilitar las cookies. Por ejemplo, cuando tiene campos de nombre de usuario / contraseña con los campos de nombre de archivo, archivo, etc.

¡Espero que esto ayude!