Subir Archivos con JavaScript usando AJAX y PHP | Mostrar y Cancelar Progreso de Subida

En este vídeo te voy a mostrar cómo poder subir archivos con JavaScript usando AJAX y un poco de PHP, y además poder mostrar y/o cancelar el proceso de subida. Sucríbete para más vídeos como éste. :)
-------------------------------------------------------------------------------------------
Sígueme en Facebook:
/ xpstutoriales
E - mail: [e-mail]
Grupo en Facebook: / 401952069860952

[@luisruperez2214]

Muchas gracias, explicas exactamente lo que estaba buscando de forma muy amena. También soy de los que prefieren el js puro a las librerías, así que he disfrutado el video y además me va a ser muy útil lo aprendido. Mi enhorabuena y desde hoy ya tienes un seguidor más.

[@santoschavezn]

Excelente vídeo bro, con esto ya tengo para avanzar en mi proyecto. Bendiciones.

[@enriquecalderon6718]

Excelente; me salio algo en chamba muy parecido y me salvaste , muchas gracias

[@LexterDev]

Con gusto bro. Qué bueno que te sirva. Un saludo.

[@andresalvarado7734]

Muchas gracias, me has ayudado en un problema que tenia hace mucho... Te agradezco toma tu like

[@dagneralenaguerra2095]

excelente explicacion me gustaría que hiciera un video con un formulario completo que contenga ademas de subir la imagen otro tipos de input como fecha nombre ect. para ver como seria el envio con ajax.

[@Juan-uj5fs]

Seria bueno subir el codigo.. lo he digitado, y no me funciona... y si a las justas entiendo... mas dificil es buscar el error...

[@alam1905]

Cuando estabas en la página web y si quieres descargar el archivo que debes de hacer?

[@SnS-SpartaN]

*_¿Y con fetch cómo se hace?_*

[@saturninopavonpinillos2176]

Muchas gracias, voy a probar a ver si me funciona.

[@micra6936]

hola muy bueno tu video broo muy explicado tengo una dudad en caso que de enviar y me aparesca hay mismo en pantalla como lo aria ayuda broo

[@HoracioLoredoGarcia]

esta muy bien pero deberias de meter el codigo en github para que puedan acceder al codigo y puedan hacer un poco de mejoras

[@descargarpeliculas4742]

Hola amigo, hice todo tal cual pero a la hora de subir no avanza la barra de progreso, no se qué estaré haciendo mal, dónde puedo descargar los archivos?

[@elbananerosoyyooo8394]

Deberias subir tu archivo para que podamos descargarlo y si podes solucionar el problema de cargar archivos PESADOS como 100 MB

[@juliogerez1778]

Una consulta yo ya tengo los proceso de subida de las imágenes a una carpeta con Ajax y php me faltaría el css y el javascript podría seguir el tutorial normal no va a ver ningún problema??

[@Jtyeahdbo]

no funciona, le doy clic en enviar y no sale barra. me djce ningun archivo seleccionado.

[@chrisferdynand]

Yo tambien tenia el mismo problema. El problema fue que puse : peticion.addEventListener("load", () -> { barra_estado.classList.add('barra_verde'); span.innerHTML = "Proceso Completado"; }); pero cambie la flecha -> por => y corrio normal (pon mucha atencion a tu codigo no es "flecha" sino es "mayor igual que" cambia en todo tu codigo.js). Luego tuve el problema que no subia la imagen a la carpeta "archivos" lo solucione subiendo todo el proyecto a un servidor localhost.

[@marcomakinon5060]

Una pequeña anotación de un motivo por el que a mi no me funcionaba y probablemente le pueda pasar a alguien más. Hay un límite de bytes que puede pesar el archivo para que de deje subirlo en el servidor, si quereis romper ese límite teneis que editar el archivo .htaccess o si no teneis crear uno. En este agregar las siguentes líneas: _php_value upload_max_filesize 1000M_ _php_value post_max_size 1000M_ Mientras no subais archivos excesivamente grandes (de un giga o mas) con esto debería funcionar sin problemas ^-^

[@mihijamiley]

Eso faltaba, buen aporte, gracias

[@marcomakinon5060]

@@mihijamiley De nada, me alegra que te haya servido ^-^

[@nathenn]

Excelente video. Suuuuper sencillo y con Javascript puro. (Personalmente no me agrada mucho jQuery).

[@LexterDev]

Genial bro. Muchas gracias. Saludos.

[@carlosacari]

muy buen video amigo una pregunta como se podria subir un archivo a una carpeta especificada osea que tenga una lista para elegir una carpeta destino supongamos que es para un colegio y hay varias materia el estudiante tiene que subir un archivo a la materia de cual trata el trabajo me podrias ayudar

[@franpliego1154]

Gracias por el tutorial, una consulta rápida, ¿funcionaría con un input para subir varias imágenes a la vez?

[@saimonnolasco1710]

Me funciona muy bien! Me podrías ayudar en lo siguiente?... Subiré una imagen a 2 posibles carpetas dependiendo si selecciona el checkbox(Si selecciona uno, solo a esa carpeta irá, pero si selecciona los dos tiene que guardarse en las 2 carpetas).

[@miguelangel6691]

Amigo una pregunta. Funciona para subir videos en diferentes formatos? o solo para imagenes o documentos?

[@adolfosequeira1021]

En caso de que genere un error, como envio un mensaje de que hubo tal error?

[@oscarreyes6098]

excelente video, sí funcionó, solo que mis estilos no cargarón como los tuyos hahaha pero todo muy bien!!

[@ln9932]

Me da error con el span.innerHtml dice uncaught typeerror: cannot ser property 'innerHTML' of undefined at XMLHttpRequest

[@henrypandales]

Para Multiples archivos

[@SalvadorDelacruz-pb1kq]

es necesario tener esa carpeta de archivos para mandar por ejemplo de un formulario abjuntar un archivo y enviarlo a un correo??

[@LexterDev]

No, para adjuntar archivos en correos el proceso es un poco diferente.

[@johnnyacosta7904]

excelente explicación

[@RCrawlerLeon]

Buenas Tardes, he hecho todo lo que indicas, y al final tengo un detalle a comentar, el firefox funciona correctamente, pero al querer utilizar Chrome me indica "seleccione un archivo", ya edite los permisos en el chrome para que acepte javascript y de todas maneras me sigue marcando ese error, de que no he seleccionado un archivo. Saludos

[@adriangonzalez5327]

Podrias ayudarme, en el servidor local si puedo subir el archivo a la carpeta, pero al montarlo en el servidor no lo hace.

[@cristianzans3196]

Gracias si funciona correctamente pero quisiera que después de cargar el archivo envié datos al archivo php es decir a subir.php

[@angeloordonez1131]

Una pregunta si lo hariamos con FETCH como podemos ver el progress de carga?

[@LexterDev]

Lastimosamente por la manera de funcionar de fetch, actualmente no es posible de hacerlo. Sin embargo, se ha planteado implementarlo en el futuro.

[@Amlovexsiempre]

Execelentes tutoriales , deberias incluir unos tutos usando php y un fraemwork como laravel o codeigniter !!

[@LexterDev]

Gracias bro, la idea la tengo sobre eso, pero aún no domino bien laravel como para enseñarlo, pero vamos a ponerle ganas :)

[@musukodark]

hola amigo muchas gracias por el aporte, no se si puedas hace un tutorial de como manejar la carga del archivo en un servidor real y evitar el error de acceso denegado por el servidor de access-control-allow-origin

[@juanosio2219]

Si necesito enviar aparte de la imagen el CSRF, como haria?

[@matematicasatualcancetutor4107]

Si el archivo index.html. lo cambio por un index.php. porque el children[]

[@tomass4045]

messirve

[@andresespinosa6891]

Muy bueno, lo probé y lo adapte a mis funciones, muchas gracias.

[@unlimited_code]

Hola, gracias por la explicación, me gusta cuando se usa JavaScript puro... Tengo una consulta... Trabajo con MVC y estoy tratando de subir un archivo .txt para cargar una data a MySql, pero no llega nada a la variable $_FILES de PHP, pero si llega al $_POST el siguiente valor: C:\fakepath\archivo.txt el .open('POST', 'ajax.php?mode=SubirArchivo', true); es enviado a un archivo 'ajax.php' el cual rescata con $_GET['mode'] el valor para el switch, si el case: 'SubirArchivo' entonces require('SubirArchivo.php'); que es el que debería de procesar la data a MySql al parecer tengo problemas en JavaScript con .setRequestHeader('Content-Type', 'multipart/form-data'); no me gusta usar en su caso uso un

[@isacgc4394]

No ay nada como usar javascript puro, intento hacerlo con js puro pero da la casualidad que todos usan librerias :( o frameworks como quieran decirle

[@benjaminlopez7333]

hola amigo como especifico a que tabla de myslq se suba?

[@LexterDev]

Eso lo debes hacer ya con el lenguaje de Back-End que uses. En este vídeo usé PHP, así que debes conectarte a la base de datos, y luego envías la instrucción SQL, y ahí especificas la tabla para hacer la inserción.

[@benjaminlopez7333]

@@LexterDev ahi lo pude hacer amigo, solo que no entiendo porque cuando hago el update set se pone uno 1 en vez de la direccion de la imagen

[@henrypandales]

Excelente

[@matiaslaudadio8111]

Buenas tardes!, donde y como puedo modificar el nombre del archivo que quiero subir?

[@9698andrea]

Buenas, el nombre del archivo ue selecciono me aparece en la barra url pero no se guarda en la carpeta de archivos, y en la barra de carga no se muestra el color ni tampoco aparece el mensaje del Proceso , me podrias ayudar ahi??

[@LexterDev]

Claro, escríbeme a mi página de Facebook para poder ayudarte mejor bro.

[@torres5139]

una duda, al momento de precionar enviar, no pasa nada, que puede ser?

[@LexterDev]

Pueden ser varias causas, revisa la consola para ver si hay algún error, revisa envío del form, y del lado de PHP.

[@pedrogonzalezcalvo3186]

Hola que tal, excelente forma de subir archivo, tengo una duda, como podria mandar una alerta en caso de que NO se subiera el archivo,??

[@alexpineda1720]

Tienes que leer la respuesta que te da el archivo de php y dependiendo de eso haces una comprobacion con un if desde Javascript

[@didieroficialdev]

Enseñanos a usar el ExtJs desde como hacer un inicio de sesion, CRUD y si se puede hasta usar el Web desktop de Sencha jeje

[@mateocruz8325]

como se haria con fetch?

[@LexterDev]

Con fetch no puedes mostrar el progreso de subida, aún está en desarrollo esa posibilidad.

[@JUANZ503]

Podrias hacer un tutorial solo de como hacer para subir el archivo sin la barra de progresl, porque me confundi con lo de la barra

[@jcanime7516]

hola amigo, tengo entendido que el metodo abort lo que hace es ignorar la respuesta del servidor, pero la imagen de igual manera se sube

[@LexterDev]

Tienes razón a medias, si bien eso puede pasar, no siempre ocurre. Pero podríamos usar petición.onabort = function() {} para hacer algo cuando se cancele.

[@jcanime7516]

tienes toda la razón, ya en esa función borramos la imagen que se subió al servidor, gracias por tu respuesta, hiciste un buen video

[@LexterDev]

Gracias! Saludos! :)

[@matematicasatualcancetutor4107]

Porque children ya lo reconoce

[@carlossantos8918]

hola amigo muy interesante tu aporte. Pero queria saber que version de javascript es esa. ya que veo termino que no he visto como por ejemplo el let. saludos y disculpa la ignorancia

[@LexterDev]

Hola bro, bueno es el nuevo estándar de JavaScript, es EcmaScript 6. Se han introducido varias cosas como el let o las arrow functions que uso en este vídeo. Saludos :)

[@carlossantos8918]

LexterXPS Muchas gracias por responder. me sirvió mucho tu video.

[@LexterDev]

De nada bro, saludos :)

[@carlossantos8918]

te ganastes un nuevo sub

[@fankellbolkistako]

magnifico tutoriales amigos, tengo un par de preguntas, al momento de seleccionar el archivo y decirle enviar, me dice "ningun archivo seleccionado, pero no me sale ningun tipo de error solo eso, lo otro es que los botones no se ven como el video, si embargo si le pongo la clase btn btn-danger si, pero igual no funciona como deberia, sabras de algo en especifico q tenga q revisar, ya he revisado y no veo el error

[@fankellbolkistako]

ojo, lo pruebo como servidor local

[@LexterDev]

Mmmm te da que no hay ningún archivo seleccionado desde el principio, o cuando le das en enviar? Por el nombre de las clases, supongo estás usando bootstrap verdad? Fíjate que la dristribución de elementos HTML sea igual al del tutorial, ya que es bastante específico el acceso a el DOM.

[@jhonatanstevenmendieta5198]

no sería mejor subirlo a una base de datos?

[@eduxelaplataformaeducativa331]

a criterio propio da muchos problemas cuando se manejan documenetos en base de datos

[@felixenriqueveganolasco4412]

Alguien me puede ayudar?, no tengo ningun error de sintaxis, pero en el momento de cuando quiero subir el archvio no aparece en la carpeta "archivos"...

[@LexterDev]

Pueden ser varias posiblidades, fíjate que PHP esté recibiendo el archivo correctamente, y segundo revisa si el cogido PHP con el que mueves el archivo, lo está moviendo correctamente al directorio, ahí puede estar el problema con laa rutas.

[@Ab4sin8409]

Hola, tengo el mismo problema, no me da ningún error(y en la consola me da el 100)pero cuando voy a revisar si el archivo de encuentra en la carpeta "archivos" No está. He revisado los directorios, pero yo los veo que estén bien escritos. Que puedo hacer al respecto

[@d.chenko7799]

Hola, como puedo mostrar el archivo subido en la página? grax..

[@LexterDev]

Mostrarlo cómo? Si pudieras darme más detalles para ver cómo ayudarte.

[@d.chenko7799]

@@LexterDev la idea es crear un album de imágenes, una vez que se suban las imágenes que se muestren en la página, como en youtube subes un video y se muestra en la página..

[@LexterDev]

Para hacer eso hay que hacer un gestor de imágenes, es decir subirlo como aquí, persistir la info de cada imagen en una BD, y agregar una vista que consulte esas imágenes.

[@nicomartinez2428]

Hola que tal? Me salta este error: Error de lectura XML: no se encuentra el elemento raíz. A que se deberia? desde ya gracias!

[@codemixer3565]

el proceso de subir archivos, solo sube imágenes o también acepta cualquier tipo de archivo, como .docx. pptx. xlsx etc.

[@LexterDev]

Puedes subir cualquier archivo bro, lo único que debes revisar es el tamaño máximo que tu servidor tenga habilitado. Saludos

[@codemixer3565]

ok gracias y buen tutorial.

[@CursosYTutorialesOderman]

Muchas gracias.

[@LexterDev]

Con mucho gusto bro. Saludos 😁

[@pipebejarano]

vas a enseñar a hacer un crud completo con ajax ?

[@LexterDev]

Sí, ya tengo pensado hacer un vídeo sobre eso con JQuery, PHP etc

[@danielhuerta2581]

para crud xcrud

[@stac95]

Gracias!!!! Solo falto estilos a la clase btn xD Saludos!!!!

[@olehdj17]

Buenos días, llevaba buscando algo así hace tiempo, podrías pasarme el código para no tener que copiarlo. Gracias.

[@maximilianomardirossian7662]

Uncaught TypeError: Cannot read property 'add' of undefined at XMLHttpRequest.peticion.addEventListener (main.js:47) ALGUNA SOLUCION ?

[@LexterDev]

Verifica la estructura, pues esa no es válida. En el vídeo no uso en ningún momento eso. ya que la variable petición es el objeto XMLHttpRequest y tu lo tienes junto como si la petición fuera una propiedad.

[@joserubenmendozasilva4306]

Yo también seguí paso a paso él tutorial y me da el mismo error.

[@wilsommontec390]

U eres bueno de programacion

[@Jtyeahdbo]

muy buen diseño pero que le costaba pasarnos el codigo en un link, se desperdicia mucho tiempo capturando codigo para que al final no sirva, un tutorial completo es que exista un link de descarga del codigo y obiamente la explicacion de como se va construyendo, no solo mostrar algo que ya esta terminado. Saludos!

[@sergiolaime6657]

estos niños son los clasicos copiar pegar aprende a escribir al menos

[@mariovanegas581]

hey excelente video bro pero crees que podes subir el codigo

[@danielhanshuamancabrera2419]

un favor brother podrias compartir el archivo

[@valeriapenagos3713]

¿Tendrás el repositorio?

[@eliuespinoza4016]

Se ve interesante. Pero porque no comparte los archivos. poquito de logica. Porque desea que tratemos de tipear tanto y si no funciona?

[@reynaldotuestaleyton2236]

amigo puedes subir el programa serias tan amable

[@davidalejandro6034]

Amigo funciona con pdf???

[@LexterDev]

Claro que sí. Sólo verifica el tamaño del archivo, si es mayor de 2MB debes modificar tu servidor apache para que admita archivos de más de 2 MB. Es todo.

[@davidalejandro6034]

LexterXPS amigo; deberian de existir mas personas como tu👏🏼👏🏼nuevo sub

[@LexterDev]

Con mucho gusto bro. Un saludo 😁

[@helenronquillo1153]

puede subir el codigo

[@miguelmontes6756]

Alguien sabe cómo ocultar la barra y ponerla visible hasta dar click en el boton de subir?

[@LexterDev]

Pues puedes usar una clase CSS que controle la propiedad display, y al dar clic se la quitas o viceversa, y listo.

[@miguelmontes6756]

@@LexterDev Muchas gracias, muy buen video amigo, gracias por la ayuda, una molestia más, en el video tu mandas a un archivo con ajax en: peticion.open('POST', 'controller.php'); peticion.send(new FormData(form)); lo que pasa es que estoy usando modelo MVC y tengo una función en PHP que realiza la subida mandandosela al modelo, como le puedo hacer? qué tendría que poner en 'controller.php'); ? el código lo tengo en mi controlador es así: // Método que recibe los datos de ejercicio static public function ejercicio(){ if(isset($_FILES['doc']['name'])){ $nombre_archivo = $_FILES['doc']['name']; $ubicacion = "vista/subidas/".$nombre_archivo; // Creación del Arreglo $datos = array("valor_nombre"=>$nombre_archivo, "valor_tipo"=>$_FILES['doc']['type'], "valor_tamano"=>$_FILES['doc']['size'], "valor_ubicacion"=>$ubicacion, "valor_tmp"=>$_FILES['doc']['tmp_name']); $respuesta = Model::modeloEjercicio($datos, "archivo"); if($respuesta == "ok"){ echo ' alert("SUBIDO EXITÓSAMENTE") window.location="index.php?opcion=ejercicio_resultados" '; } else{ echo ' alert("ERROR AL SUBIR ARCHIVO") window.location="index.php?opcion=ejercicio" '; } } } y en mi modelo algo así: // Método para insertar datos el archivo en MySQL static public function modeloEjercicio($datos, $tabla){ // OBTENER FECHA Y HORA date_default_timezone_set("America/Mazatlan"); $hora = date("H:i:s"); $fecha = date("Y-m-d"); // Variables del arreglo $nombre_archivo = $datos['valor_nombre']; $tipo_archivo = $datos['valor_tipo']; $tamano_archivo = $datos['valor_tamano']; $ubicacion = $datos['valor_ubicacion']; $tmp_name = $datos['valor_tmp']; move_uploaded_file($_FILES['doc']['tmp_name'], $ubicacion); $datos = Conexion::conectar()->prepare("INSERT INTO $tabla (nombre, tipo, tamano, ubicacion, fecha, hora) VALUES ('$nombre_archivo','$tipo_archivo','$tamano_archivo','$ubicacion','$fecha','$hora')"); if($datos->execute()){ return "ok"; } else{ return "error"; } $datos->close(); } Pd: agradecería mucho la ayuda, no he encontrado información al respecto, recién estoy aprendiendo AJAX bro

[@miguelmontes6756]

podrías enviarme el código a [e-mail]?? PD: no me funcionó, marca el inicio y el final, mas no el progreso, ni mueve el archivo

[@LuisCastro-gw6rq]

Hola alguien tiene este proyecto en GITHub ?

[@zarmandoxyx2007]

Creo que eso no es ajax :/

[@LexterDev]

¿Eh? ¿Entonces qué es? Es 100% AJAX.

[@javierpanzay9230]

y el codigo fuente :v

[@LexterDev]

En el vídeo lo muestro :v

[@tequilation9992]

Donde está la mierda del code para copiarlo?

[@LexterDev]

Te enseñan cómo poder hacer ciertas cosas por medio de un ejemplo, explican eso y muestran paso a paso, y quieres nada más copiar y pegar? Y sumado a eso insultas y usas palabras despectivas en un vídeo tutorial hecho para ayudar? Mal vamos así.

[@musukodark]

hola amigo muchas gracias por el aporte, no se si puedas hace un tutorial de como manejar la carga del archivo en un servidor real y evitar el error de acceso denegado por el servidor de access-control-allow-origin

[@LexterDev]

A qué te refieres con un "servidor real" ?

[@julianbeytiarejon9495]

no funciona, le doy clic en enviar y no sale barra. me djce ningun archivo seleccionado.

[@LexterDev]

Revisa entonces el input bro, algo no está bien con él.