Madre mía , esto sí es un programador de verdad, yo no entiendo mucho de programación, pero no es necesario para ver que es un gran programador con destreza que sabe lo que hace y que domina el tema a la perfección. Uno de los mejores programadores que he podido ver. Que pena que no puedo usar el código porque lo necesito para subir mp3 de 1 minuto y banners, pero es un código hecho por un genio.
Bueno pues me parece un video de 10, un componente de 10 y una explicación de 10. Ahora Lo mismo pero almacenar intermedio (pudiendo eliminar antes de subir) y subirlos bajo demanda ya seria..... "un lujo"
Gracias por tus palabras baradone! Algún día seremos una legión de programadores explicando lo que aprendimos a hacer, que hayan encontrado su lugar en TH-cam (por ahora la plataforma nos esconde bajo la alfombra jajajaja). Saludos!
Lo que unico que no me salio fue curiosamente el console.log del json pero luego lo pude hacer todo lo demas, me tiraba un error de que el json tenia un error de sintaxis Adaptar lo que mostraste a mi pequeño proyecto que estoy haciendo con codeigneitor 4 Muy buen video
Excelente amigo, si quisiera incluir la imagen con más datos, por ejemplo: Descripción, Fecha, etc. , ¿como podría enviar esas otras variables al upload.php ? Gracias.
Hola muy buen video...me ayudaste mucho. Me gustaría que en el formulario solo pueda enviarse un solo archivo, ya sea .txt .jpg cualquier extensión pero que esté permitido solo dropear 1. Se puede hacer eso? Osea limitar la cantidad de archivos que puede recibir el formulario.
Hola, gracias por tus palabas. A ver son dos cambios los que tenés que hacer para que manden un solo archivo (tanto por el buscar como el droppear archivos). 1) Al input de tipo file, en el index.php, tenés que sacarle el atributo multiple. Eso va a hacer que solo pueda seleccionar UN solo archivo por ese medio. 2) En el caso del drag and drop, no podés limitar la cantidad de archivos que el usuario elije, pero sí la cantidad que vos agarrás del drop. Por ejemplo, obtener solo el primero de todos los files. Para esto, el segundo cambio sería en el script.js cambiar la línea que hace este for: for( let file of listado_archivos ){ FD.append( 'files[]', file); } Por appendear solo el primer elemento de listado_archivos (el indice 0), como te dejo a continuación: FD.append( 'files[]', listado_archivos[0]); Con eso solo vas a agregar un archivo al FormData. Sobre el tipo de archivo, no hay ninguna validación integrada para evitar que te manden txt o doc, o lo que sea. Vas a tener que modificar la etiqueta que creás al mostrar los uploads, porque yo muestro pero no podés pasarle como src="datos.txt" porque no va a saber qué hacer. Tal vez cambiarlo solo por una lista de nombres de archivos, sin el IMG. Espero te haya servido mi respuesta. Saludos!
Hola, José Eso lo tendrías que agregar en el archivo upload.php que es el que recibe los archivos. Pero depende de cómo quieras guardar el archivo en la base de datos. Si querés tener el archivo en una columna del MySQL o si querés tener el archivo en una carpeta y guardar en el MySQL solo el nombre. Como sea, ambas soluciones sucederían adentro del foreach( ) que hace la subida de archivos. Si querés guardar solo la ruta al archivo en la base de datos, vos ya tenés la variable $nombre_real que tiene el nombre que estás usando para guardar las fotos. Ese valor lo usarías en la cadena de texto para hacer el INSERT a la base de datos: //esto iría en la línea 7 de upload.php: $consulta = "INSERT INTO la_tabla_que_sea SET ARCHIVO='$nombre_real', UNA COLUMNA='un valor', OTRA_COLUMNA='otro valor'"; //Y acá ejecutas tu consulta, sea por mysqli_query( ) o por PDO, según la librería que manejes. Si lo que querés guardar es el contenido del archivo en la base de datos, no haría falta que crearas la variable $nombre_real, ni hacer su move_uploaded_file. Directamente crearías las consulta SQL para hacer el INSERT, y en la columna del archivo (que debe ser del tipo de dato MEDIUMBLOB o LONGBLOB, según el tamaño de archivo máximo que aceptás) usar la función de MySQL LOAD_FILE( ) que está pensada para leer el contenido de un archivo, pasándole como ruta el tmp_name de la foto (pero OJO que la ruta debe ser con la barra "/" y no con la barra invertida "\"). //esto iría en la línea 7 de upload.php: $ruta_al_archivo = str_replace( "/", "\\", $tmp_name ); $consulta = "INSERT INTO la_tabla_que_sea SET ARCHIVO=LOAD_FILE('$ruta_al_archivo'), UNA COLUMNA='un valor', OTRA_COLUMNA='otro valor'"; //Y acá ejecutas tu consulta, sea por mysqli_query( ) o por PDO, según la librería que manejes. Pero en este caso ya deberías modificar la forma de recuperar el listado de archivos, porque el glob( ) no te va a servir (ya que las fotos no están físicamente en una carpeta del server, sino que tendrás que hacer la consulta SELECT FROM que traiga todos los archivos guardados). Saludos!
Hola me gustaría que cuando suba un fichero pueda abrirlo haciendo doble click bien sea una imagen, mp3 o lo que sea ¿Como podría hacerlo? Tambien quiero que al arrastrar dichos fichers multiples se cambie su icono según sea una imagen o un mp3
Hola, en la petición Fetch me sale este error por consola, "Request failed SyntaxError: Unexpected non-whitespace character after JSON at position", no me deja avanzar
![Crear el objeto XMLHttpRequest 🔹 AJAX FÁCIL y SIN FRAMEWORKS [ 01 de 05 ] ▪️ Vainilla Javascript](http://i.ytimg.com/vi/TF-fwphqt7g/mqdefault.jpg)
![Crear el objeto XMLHttpRequest 🔹 AJAX FÁCIL y SIN FRAMEWORKS [ 01 de 05 ] ▪️ Vainilla Javascript](/img/tr.png)
![VALIDAR LA EXTENSIÓN DE ARCHIVOS Y PREVISUALIZARLOS [INPUT FILE] JS](/img/n.gif)
Madre mía , esto sí es un programador de verdad, yo no entiendo mucho de programación, pero no es necesario para ver que es un gran programador con destreza que sabe lo que hace y que domina el tema a la perfección. Uno de los mejores programadores que he podido ver. Que pena que no puedo usar el código porque lo necesito para subir mp3 de 1 minuto y banners, pero es un código hecho por un genio.
Gracias German excelente tutorial
Todo muy bien explicado. Eres un grande Germán!
Gracias Joaquín, abrazo!
Bueno pues me parece un video de 10, un componente de 10 y una explicación de 10. Ahora Lo mismo pero almacenar intermedio (pudiendo eliminar antes de subir) y subirlos bajo demanda ya seria..... "un lujo"
Más gente como tú dios mío
Gracias por tus palabras baradone!
Algún día seremos una legión de programadores explicando lo que aprendimos a hacer, que hayan encontrado su lugar en TH-cam (por ahora la plataforma nos esconde bajo la alfombra jajajaja).
Saludos!
Muy buen video, Gracias por tu aporte.
Gracias a vos por el comentario y el apoyo, Homer!!
Abrazo
Que capo me resolviste un brete que me estaba haciendo renegar mal . Gracias.
Gracias a vos por el comentario y apoyo. Saludos!
Lo que unico que no me salio fue curiosamente el console.log del json pero luego lo pude hacer todo lo demas, me tiraba un error de que el json tenia un error de sintaxis
Adaptar lo que mostraste a mi pequeño proyecto que estoy haciendo con codeigneitor 4
Muy buen video
Excelente amigo, si quisiera incluir la imagen con más datos, por ejemplo: Descripción, Fecha, etc. , ¿como podría enviar esas otras variables al upload.php ? Gracias.
Crack!
excelente video gracias
¡A vos, por pasar y comentar!
Hola muy buen video...me ayudaste mucho. Me gustaría que en el formulario solo pueda enviarse un solo archivo, ya sea .txt .jpg cualquier extensión pero que esté permitido solo dropear 1. Se puede hacer eso? Osea limitar la cantidad de archivos que puede recibir el formulario.
Hola, gracias por tus palabas.
A ver son dos cambios los que tenés que hacer para que manden un solo archivo (tanto por el buscar como el droppear archivos).
1) Al input de tipo file, en el index.php, tenés que sacarle el atributo multiple. Eso va a hacer que solo pueda seleccionar UN solo archivo por ese medio.
2) En el caso del drag and drop, no podés limitar la cantidad de archivos que el usuario elije, pero sí la cantidad que vos agarrás del drop. Por ejemplo, obtener solo el primero de todos los files.
Para esto, el segundo cambio sería en el script.js cambiar la línea que hace este for:
for( let file of listado_archivos ){
FD.append( 'files[]', file);
}
Por appendear solo el primer elemento de listado_archivos (el indice 0), como te dejo a continuación:
FD.append( 'files[]', listado_archivos[0]);
Con eso solo vas a agregar un archivo al FormData. Sobre el tipo de archivo, no hay ninguna validación integrada para evitar que te manden txt o doc, o lo que sea.
Vas a tener que modificar la etiqueta que creás al mostrar los uploads, porque yo muestro pero no podés pasarle como src="datos.txt" porque no va a saber qué hacer.
Tal vez cambiarlo solo por una lista de nombres de archivos, sin el IMG.
Espero te haya servido mi respuesta. Saludos!
Buenas tardes, excelente video, ¿Cómo lo subiríamos a MySQL?
Gracias
Hola, José
Eso lo tendrías que agregar en el archivo upload.php que es el que recibe los archivos.
Pero depende de cómo quieras guardar el archivo en la base de datos. Si querés tener el archivo en una columna del MySQL o si querés tener el archivo en una carpeta y guardar en el MySQL solo el nombre.
Como sea, ambas soluciones sucederían adentro del foreach( ) que hace la subida de archivos.
Si querés guardar solo la ruta al archivo en la base de datos, vos ya tenés la variable $nombre_real que tiene el nombre que estás usando para guardar las fotos.
Ese valor lo usarías en la cadena de texto para hacer el INSERT a la base de datos:
//esto iría en la línea 7 de upload.php:
$consulta = "INSERT INTO la_tabla_que_sea SET ARCHIVO='$nombre_real', UNA COLUMNA='un valor', OTRA_COLUMNA='otro valor'";
//Y acá ejecutas tu consulta, sea por mysqli_query( ) o por PDO, según la librería que manejes.
Si lo que querés guardar es el contenido del archivo en la base de datos, no haría falta que crearas la variable $nombre_real, ni hacer su move_uploaded_file.
Directamente crearías las consulta SQL para hacer el INSERT, y en la columna del archivo (que debe ser del tipo de dato MEDIUMBLOB o LONGBLOB, según el tamaño de archivo máximo que aceptás) usar la función de MySQL LOAD_FILE( ) que está pensada para leer el contenido de un archivo, pasándole como ruta el tmp_name de la foto (pero OJO que la ruta debe ser con la barra "/" y no con la barra invertida "\").
//esto iría en la línea 7 de upload.php:
$ruta_al_archivo = str_replace( "/", "\\", $tmp_name );
$consulta = "INSERT INTO la_tabla_que_sea SET ARCHIVO=LOAD_FILE('$ruta_al_archivo'), UNA COLUMNA='un valor', OTRA_COLUMNA='otro valor'";
//Y acá ejecutas tu consulta, sea por mysqli_query( ) o por PDO, según la librería que manejes.
Pero en este caso ya deberías modificar la forma de recuperar el listado de archivos, porque el glob( ) no te va a servir (ya que las fotos no están físicamente en una carpeta del server, sino que tendrás que hacer la consulta SELECT FROM que traiga todos los archivos guardados).
Saludos!
Muchas gracias
Hola me gustaría que cuando suba un fichero pueda abrirlo haciendo doble click bien sea una imagen, mp3 o lo que sea ¿Como podría hacerlo? Tambien quiero que al arrastrar dichos fichers multiples se cambie su icono según sea una imagen o un mp3
Buenas, como podria hacer para recargar la pagina en la que se sube la imagen luego de que esta se suba? gracias
Hola, en la petición Fetch me sale este error por consola, "Request failed SyntaxError: Unexpected non-whitespace character after JSON at position", no me deja avanzar