Scribd
Cargar
150 vistas3 páginas

Como Subir Archivos Con Javascript - Ricardo Geek

Este documento explica cómo subir archivos al servidor con JavaScript puro. Se crea un formulario HTML que recopila datos del usuario como nombre, DPI e imagen. Al enviar el formulario, la función enviar crea un objeto FormData con los datos y lo envía mediante una solicitud AJAX. El código del servidor en upload.php recibe los datos y guarda la imagen. Adicionalmente, se muestra una función para generar un preview de la imagen cargada mediante el File API de JavaScript antes del envío.

Cargado por

Impresiones QuintNarv
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
150 vistas3 páginas

Como Subir Archivos Con Javascript - Ricardo Geek

Este documento explica cómo subir archivos al servidor con JavaScript puro. Se crea un formulario HTML que recopila datos del usuario como nombre, DPI e imagen. Al enviar el formulario, la función enviar crea un objeto FormData con los datos y lo envía mediante una solicitud AJAX. El código del servidor en upload.php recibe los datos y guarda la imagen. Adicionalmente, se muestra una función para generar un preview de la imagen cargada mediante el File API de JavaScript antes del envío.

Cargado por

Impresiones QuintNarv
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Como subir archivos con javascript

July 25, 2016 RicardoGeek

Hace algunos años el cuando quería subir algún archivo a un servidor tenia que, indiscutiblemente, hacer
un post a un controlador por medio de un form con el tagenctype (encoding type, por sus siglas en ingles)
del tipo multipart/data, La experiencia de usuario era horrible! ya que no sabias que estaba pasando en la
subía del archivo o archivos, y para nosotros como desarrolladores era una pesadilla el hacer una
experiencia simple y fácil para los usuarios.

No obstante al día de hoy el manejo de archivos del lado del cliente, es decir desde el navegador se ha
convertido en una cosa de lo mas trivial gracias al file api de javascript.

Para probarlo voy a demostrar como hacemos para subir un archivo al servidor con javascript puro, sin
plugins y una pizca de codigo server-side para manejar los datos.

Para agregarle a la demostración algo de complejidad de la vida real, vamos a crear un formulario html que
recibe los datos básicos de un usuario y ademas sube una fotografía, de modo que el post sea
verdaderamente “multipart”.

1 <form id="form" action="javascript: evniar(this)" enctype=" multipart/form-data"


2 Nombre:
3 <input type="text" name="nombre" />
4 DPI (documento personal de identificacion):
5 <input type="text" name="dpi" />
6 Foto: <br/>
7 <input type="file" name="pic" id="pic" />
8 <input type="submit" value="Enviar" />
9 </form>

El formulario como ven recopila, nombre, numero de identificación y la foto de una persona el código de la
función javascript encontes va a crear un preview de la imagen, y al momento de enviar el formulario
agregara la imagen, y los campos en la transmisión de datos.

1 function enviar(form) {
2 var persona = new FormData(form);
3 var req = ajaxRequest("upload.php");
4 req.send(persona);
5 }
6
7 function ajaxRequest(url) {
8 if (window.XMLHttpRequest) {
9 var request = new XMLHttpRequest();
10 } else if(window.ActiveXObject) {
11
var request = new ActiveXObject("Microsoft.XMLHTTP");
12
}
13
14
request.onload = function(Event) {
15
if (request.status == 200) {
16 var response = JSON.parse(request.responseText);
17 if(response.success){
18 alert("Persona procesada exitosamente");
19 } else {
20 alert("Hubo un problema al procesar, codigo: " +
21 }
22 }
23 };
24
25 }

En esta parte vemos que hay 2 funciones, una para crear el objeto request ajaxRequest, el cual servirá
para transmitir la información al servidor de manera asíncrona y el otroenviar que hace uso de la otra
función para enviar el formulario.

El código del servidor que ejecuta la tarea de validar y guardar el archivo en alguna ruta especificada se
encontraría en el archivo upload.php de este rompecabezas, y contendría el siguiente código:

1 <?php
2 $foto = $_FILES['pic'];
3 $data = array('success' => false);
4
5 if(copy($foto['tmp_name'],'ruta/'.$foto['name'])){
6 $data = array('success' => true);
7 }
8
9 echo json_encode($data);
10 ?>

y eso fue todo sobre como subir el archivo, pero que hay de la parte del preview de la imagen?

bien para ello necesitamos mas código de javascript (usando jQuery para algunas partes):

1 function leer(input, form) {


2 for(var i =0; i< input.files.length; i++){
3 if (input.files[i]) {
4 var reader = new FileReader();
5
6 reader.onload = function (e) {
7 var img = $('<img id="dynamic">');
8
img.attr('src', e.target.result);
9
img.appendTo(form);
10
}
11
reader.readAsDataURL(input.files[i]);
12
}
13
}
14
}

que paso aqui? bueno primero iteramos el file input (que puede contener mas de un archivo), luego para
cada archivo que leemos declaramos un objeto FileReader del mencionado file api, y en el evento load le
agregamos una función que básicamente convierte la imagen en un blob y la agrega al src de un elemento
html que se genera dinamicamente y finalmente se le agrega al form en cuestión.

Luego de esto solo es cuestion de agregar unas lineas mas para manejar el evento onchange del input
file, de manera que ejecute el metodo leer cada vez que se agregue un archivo.

Para esto tenemos 2 opciones:

1. Agregar el evento onchage en el input file


2. Crear el codigo javascript para que nuestro html sea mas limpio

1 //opcion 1
2 <input type="file" name="pic" id="pic" onchage="javascript:leer()"
3
4 //opcion 2
5 var archivo = document.getElementById("pic");
6 archivo.addEventListener("change", function(event) {
7 leer();
8 }

Y así pues, es como podemos subir nuestros ficheros al servidor de una manera fácil rápida y moderna

Manos al codigo!

También podría gustarte