Video 9 – Como guardar una foto en la base de datos
Instrucciones
Crear el archivo usuarios.js en la carpeta js/vistas y se vincula al final del archivo plantilla.php Con la línea
<script
src="vistas/js/usuarios.js"></script>
|
Se digita los siguiente en usuarios.js y se verifica en la consola que estén los datos de la imagen
style="height: 55px; width: 580px;
|
Validar el formato y tamaño de la imagen y colocarla en el img agregando el siguiente código en el archivo usuarios.js Se debe agregar la clase previsualizar en la etiqueta <img> del archivo usuarios.php
$(".nuevaFoto").change(function(){
var imagen =
this.files[0];
console.log("imagen",imagen["type"]);
//Validar el tamaño de la
imagen
/*=============================================
VALIDAMOS EL FORMATO DE LA IMAGEN
SEA JPG O PNG
=============================================*/
if(imagen["type"]
!= "image/jpeg" && imagen["type"] != "image/png"){
$(".nuevaFoto").val("");
Swal.fire({
title: "Error al subir la
imagen",
text: "¡La imagen debe estar en
formato JPG o PNG!",
type: "error",
confirmButtonText: "¡Cerrar!"
});
}else
if(imagen["size"] > 2000000){
$(".nuevaFoto").val("");
Swal.fire({
title: "Error al subir la
imagen",
text: "¡La imagen no debe pesar más
de 2MB!",
type: "error",
confirmButtonText: "¡Cerrar!"
});
}else{
var datosImagen =
new FileReader;
datosImagen.readAsDataURL(imagen);
$(datosImagen).on("load",
function(event){
var
rutaImagen = event.target.result;
$(".previsualizar").attr("src",
rutaImagen);
})
}
})
|
Crear la carpeta usuarios dentro de la carpeta vistas dentro de img
Validar la imagen en el archivo usuarios.controlador.php con el siguiente código
if(isset($_FILES['nuevaFoto']['tmp_name'])){
|
$_FILES se puede imprimir con un var_dump para ver la dirección el archivo temporal
Realizar el recorte de la imagen a 500x500, crear la carpeta y gardar la imagen dependiendo si es jpg o png con el siguiente código
$ruta="";
if(isset($_FILES['nuevaFoto']['tmp_name'])){
list($ancho, $alto) = getimagesize($_FILES['nuevaFoto']['tmp_name']);
$nuevoancho = 500;
$nuevoalto = 500;
//Crear directorio
$directorio = "vistas/img/usuarios/".$_POST['nuevoUsuario'];
mkdir($directorio,0755);
//De acuerdo al tipo de imagen se hace el proceso de recorte de la foto
if($_FILES['nuevaFoto']['type']=="image/jpeg"){
$aleatorio = mt_rand(100,999);
$ruta = $directorio."/".$aleatorio.".jpg";
$origen = imagecreatefromjpeg($_FILES['nuevaFoto']['tmp_name']);
$destino = imagecreatetruecolor($nuevoancho, $nuevoalto);
imagecopyresized($destino, $origen, 0, 0, 0, 0, $nuevoancho, $nuevoalto, $ancho, $alto);
imagejpeg($destino,$ruta);
}
if($_FILES['nuevaFoto']['type']=="image/png"){
$aleatorio = mt_rand(100,999);
$ruta = $directorio."/".$aleatorio.".png";
$origen = imagecreatefrompng($_FILES['nuevaFoto']['tmp_name']);
$destino = imagecreatetruecolor($nuevoancho, $nuevoalto);
imagecopyresized($destino, $origen, 0, 0, 0, 0, $nuevoancho, $nuevoalto, $ancho, $alto);
imagepng($destino,$ruta);
}
}
|
Almacenar la url de la foto en la base de datos, se agrega la variable ruta en el array del archivo usuarios.controlador.php quedando de la siguiente manera
stmt = conexion::conectar()->prepare("INSERT INTO $tabla (nombre,usuario,password,perfil,foto) VALUES (:nombre,:usuario,:password,:perfil,:foto)");
$stmt -> bindParam(":nombre",$datos['nombre'],PDO::PARAM_STR);
$stmt -> bindParam(":usuario",$datos['usuario'],PDO::PARAM_STR);
$stmt -> bindParam(":password",$datos['password'],PDO::PARAM_STR);
$stmt -> bindParam(":perfil",$datos['perfil'],PDO::PARAM_STR);
$stmt -> bindParam(":foto",$datos['ruta'],PDO::PARAM_STR);
|
Seguimos avanzando con los vídeos Cesar. Gracias.
ResponderEliminargracias
ResponderEliminar