Subir Archivos con JavaScript usando AJAX y PHP | Mostrar y Cancelar Progreso de Subida
HTML-код
- Опубликовано: 12 сен 2024
- 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: xtremetuts@gmail.com
Grupo en Facebook: / 401952069860952
![VALIDAR LA EXTENSIÓN DE ARCHIVOS Y PREVISUALIZARLOS [INPUT FILE] JS](http://i.ytimg.com/vi/w-5ghh1mkh8/mqdefault.jpg)
![VALIDAR LA EXTENSIÓN DE ARCHIVOS Y PREVISUALIZARLOS [INPUT FILE] JS](/img/tr.png)
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.
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 ^-^
Eso faltaba, buen aporte, gracias
@@mihijamiley De nada, me alegra que te haya servido ^-^
Para Multiples archivos
Excelente vídeo bro, con esto ya tengo para avanzar en mi proyecto. Bendiciones.
Deberias subir tu archivo para que podamos descargarlo y si podes solucionar el problema de cargar archivos PESADOS como 100 MB
Excelente; me salio algo en chamba muy parecido y me salvaste , muchas gracias
Con gusto bro. Qué bueno que te sirva. Un saludo.
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.
esta muy bien pero deberias de meter el codigo en github para que puedan acceder al codigo y puedan hacer un poco de mejoras
no funciona, le doy clic en enviar y no sale barra. me djce ningun archivo seleccionado.
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.
Cuando estabas en la página web y si quieres descargar el archivo que debes de hacer?
Muchas gracias, me has ayudado en un problema que tenia hace mucho... Te agradezco toma tu like
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).
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
Excelente video. Suuuuper sencillo y con Javascript puro. (Personalmente no me agrada mucho jQuery).
Genial bro. Muchas gracias. Saludos.
excelente video, sí funcionó, solo que mis estilos no cargarón como los tuyos hahaha pero todo muy bien!!
Muchas gracias, voy a probar a ver si me funciona.
Gracias por el tutorial, una consulta rápida, ¿funcionaría con un input para subir varias imágenes a la vez?
*_¿Y con fetch cómo se hace?_*
Seria bueno subir el codigo.. lo he digitado, y no me funciona... y si a las justas entiendo... mas dificil es buscar el error...
Me da error con el span.innerHtml dice uncaught typeerror: cannot ser property 'innerHTML' of undefined at XMLHttpRequest
excelente explicación
messirve
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
Amigo una pregunta. Funciona para subir videos en diferentes formatos? o solo para imagenes o documentos?
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
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??
Execelentes tutoriales , deberias incluir unos tutos usando php y un fraemwork como laravel o codeigniter !!
Gracias bro, la idea la tengo sobre eso, pero aún no domino bien laravel como para enseñarlo, pero vamos a ponerle ganas :)
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?
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
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
Excelente
Muy bueno, lo probé y lo adapte a mis funciones, muchas gracias.
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
Podrias ayudarme, en el servidor local si puedo subir el archivo a la carpeta, pero al montarlo en el servidor no lo hace.
En caso de que genere un error, como envio un mensaje de que hubo tal error?
es necesario tener esa carpeta de archivos para mandar por ejemplo de un formulario abjuntar un archivo y enviarlo a un correo??
No, para adjuntar archivos en correos el proceso es un poco diferente.
Gracias si funciona correctamente pero quisiera que después de cargar el archivo envié datos al archivo php es decir a subir.php
Muchas gracias.
Con mucho gusto bro. Saludos 😁
Si necesito enviar aparte de la imagen el CSRF, como haria?
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
Buenas tardes!, donde y como puedo modificar el nombre del archivo que quiero subir?
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
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!
Si el archivo index.html. lo cambio por un index.php. porque el children[]
Una pregunta si lo hariamos con FETCH como podemos ver el progress de carga?
Lastimosamente por la manera de funcionar de fetch, actualmente no es posible de hacerlo. Sin embargo, se ha planteado implementarlo en el futuro.
U eres bueno de programacion
Porque children ya lo reconoce
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!
estos niños son los clasicos copiar pegar aprende a escribir al menos
Buenos días, llevaba buscando algo así hace tiempo, podrías pasarme el código para no tener que copiarlo. Gracias.
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,??
Tienes que leer la respuesta que te da el archivo de php y dependiendo de eso haces una comprobacion con un if desde Javascript
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??
Claro, escríbeme a mi página de Facebook para poder ayudarte mejor bro.
¿Tendrás el repositorio?
Gracias!!!!
Solo falto estilos a la clase btn xD
Saludos!!!!
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
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 :)
LexterXPS Muchas gracias por responder. me sirvió mucho tu video.
De nada bro, saludos :)
te ganastes un nuevo sub
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
ojo, lo pruebo como servidor local
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.
una duda, al momento de precionar enviar, no pasa nada, que puede ser?
Pueden ser varias causas, revisa la consola para ver si hay algún error, revisa envío del form, y del lado de PHP.
como se haria con fetch?
Con fetch no puedes mostrar el progreso de subida, aún está en desarrollo esa posibilidad.
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
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.
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
Gracias! Saludos! :)
no sería mejor subirlo a una base de datos?
a criterio propio da muchos problemas cuando se manejan documenetos en base de datos
el proceso de subir archivos, solo sube imágenes o también acepta cualquier tipo de archivo, como .docx. pptx. xlsx etc.
Puedes subir cualquier archivo bro, lo único que debes revisar es el tamaño máximo que tu servidor tenga habilitado. Saludos
ok gracias y buen tutorial.
hola amigo como especifico a que tabla de myslq se suba?
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.
@@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
Se ve interesante. Pero porque no comparte los archivos. poquito de logica. Porque desea que tratemos de tipear tanto y si no funciona?
amigo puedes subir el programa serias tan amable
hey excelente video bro pero crees que podes subir el codigo
un favor brother podrias compartir el archivo
puede subir el codigo
vas a enseñar a hacer un crud completo con ajax ?
Sí, ya tengo pensado hacer un vídeo sobre eso con JQuery, PHP etc
para crud xcrud
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"...
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.
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
Hola, como puedo mostrar el archivo subido en la página? grax..
Mostrarlo cómo? Si pudieras darme más detalles para ver cómo ayudarte.
@@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..
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.
Uncaught TypeError: Cannot read property 'add' of undefined
at XMLHttpRequest.peticion.addEventListener (main.js:47)
ALGUNA SOLUCION ?
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.
Yo también seguí paso a paso él tutorial y me da el mismo error.
Hola alguien tiene este proyecto en GITHub ?
Alguien sabe cómo ocultar la barra y ponerla visible hasta dar click en el boton de subir?
Pues puedes usar una clase CSS que controle la propiedad display, y al dar clic se la quitas o viceversa, y listo.
@@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
podrías enviarme el código a montesblogz@gmail.com??
PD: no me funcionó, marca el inicio y el final, mas no el progreso, ni mueve el archivo
Amigo funciona con pdf???
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.
LexterXPS amigo; deberian de existir mas personas como tu👏🏼👏🏼nuevo sub
Con mucho gusto bro. Un saludo 😁
Creo que eso no es ajax :/
¿Eh? ¿Entonces qué es? Es 100% AJAX.
y el codigo fuente :v
En el vídeo lo muestro :v
Donde está la mierda del code para copiarlo?
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í.
no funciona, le doy clic en enviar y no sale barra. me djce ningun archivo seleccionado.
Revisa entonces el input bro, algo no está bien con él.
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
A qué te refieres con un "servidor real" ?