El día de hoy , te traigo un tutorial de como crear un sistema , con php y css.
el php, será donde nosotros mediante un formulario creado con php, podremos enviar imágenes a una carpeta determinada.
bien comencemos, lo primero que haremos es crear un archivo. recordemos que el navegador no reconoce el php, en un navegador normal , para ello es necesario un servidor local. en esta ocasión usaremos XAMPP, es uno de los mejores que hay como servidor local, para poder descargar ve aquí
👉👉👉 Dowloand ,.
una vez descargado, vamos a instalarlo .
una vez instalado, tenemos que hacer lo siguiente.
Hasta que quede así:
pero para poder llamar, nuestros archivos desde nuestro navegador, tienes que crear una carpeta dentro de la siguiente dirección: Explorador de archivos - este equipo - Disco local - xampp - htdocs 👈👈 dentro de la carpeta ---> htdocs podremos crear nuestra carpeta de nuestro proyecto.
Ahora en nuestro navegador en mi caso Google Chrome , pondré la siguiente dirección: localhost/dashboard/ .....
Para llamar nuestro proyecto solo basta con ir al navegador colocar localhost/mi-proyecto,
Ahora si entremos de lleno al código, la parte de creación de carpetas esa parte la omitire por que ya manejan, esa parte :
lo primero de todo crearemos un archivo index.php.
dentro de este archivo tendrá lo siguiente:
el php, será donde nosotros mediante un formulario creado con php, podremos enviar imágenes a una carpeta determinada.
bien comencemos, lo primero que haremos es crear un archivo. recordemos que el navegador no reconoce el php, en un navegador normal , para ello es necesario un servidor local. en esta ocasión usaremos XAMPP, es uno de los mejores que hay como servidor local, para poder descargar ve aquí
👉👉👉 Dowloand ,.
una vez descargado, vamos a instalarlo .
una vez instalado, tenemos que hacer lo siguiente.
 |
| Una vez ejecutado el programa, tienes que activar estas tres opciones (Apache+MySQL+FileZilla) |
Hasta que quede así:
 |
| Una vez activado esto.estamos listos para crear nuestro proyecto. |
pero para poder llamar, nuestros archivos desde nuestro navegador, tienes que crear una carpeta dentro de la siguiente dirección: Explorador de archivos - este equipo - Disco local - xampp - htdocs 👈👈 dentro de la carpeta ---> htdocs podremos crear nuestra carpeta de nuestro proyecto.
Ahora en nuestro navegador en mi caso Google Chrome , pondré la siguiente dirección: localhost/dashboard/ .....
Para llamar nuestro proyecto solo basta con ir al navegador colocar localhost/mi-proyecto,
Ahora si entremos de lleno al código, la parte de creación de carpetas esa parte la omitire por que ya manejan, esa parte :
lo primero de todo crearemos un archivo index.php.
dentro de este archivo tendrá lo siguiente:
| <!DOCTYPE html> ---> estructura basica de html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Subir archivos</title> | |
| <link rel="stylesheet" href="main.css"> ----> estilos css | |
| </head> | |
| <body> | |
| <form action="upload.php" method="POST" enctype="multipart/form-data">-- este form nos servirá para llamar nuestro archivo upload.php. | |
| <h2>Subir archivo</h2> | |
| <input type="file" name="file"> | |
| <p class="center"><input type="submit" value="Subir archivo"></p> | |
| </form> | |
| </body> | |
| </html>
Código css
body{
font-family: Arial, Helvetica, sans-serif;
}
form{
background-color: #eee;
margin: 0 auto;
width: 400px;
padding: 20px;
}
input{
border: solid 0;
border-radius: 3px;
}
input[type=text],
input[type=password],
input[type=email],
textarea{
padding: 10px;
font-size: 18px;
outline: none;
width: 370px;
}
input[type=submit]{
background-color: #1E69E3;
color: white;
padding: 8px;
border: none;
width: 200px;
}
.center{
text-align: center;
}
.opcion{
padding: 5px 0;
}
.barra{
background-color:rgb(152, 196, 236);
border-radius: 4px;
padding: 10px;
}
.seleccionado{
background-color: rgb(33, 90, 143);
border-radius: 4px;
color: white;
padding: 10px;
}
#menu{
background-color: #eee;
padding: 10px;
}
#menu ul{
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
width: 100%;
}
#menu ul li{
display: inline;
}
#menu ul li a{
color: #1E69E3;
text-decoration: none;
}
#menu ul li a:hover{
color: rgb(227, 109, 30);
text-decoration: none;
}
.cerrar-sesion{
float: right;
}
Código PHP
<?php
//var_dump($_FILES["file"]);
$directorio = "imagenes/";
$archivo = $directorio . basename($_FILES["file"]["name"]);
$tipoArchivo = strtolower(pathinfo($archivo, PATHINFO_EXTENSION));
// valida que es imagen
$checarSiImagen = getimagesize($_FILES["file"]["tmp_name"]);
//var_dump($size);
if($checarSiImagen != false){
//validando tamaño del archivo
$size = $_FILES["file"]["size"];
if($size > 500000){
echo "El archivo tiene que ser menor a 500kb";
}else{
//validar tipo de imagen
if($tipoArchivo == "jpg" || $tipoArchivo == "jpeg"){
// se validó el archivo correctamente
if(move_uploaded_file($_FILES["file"]["tmp_name"], $archivo)){
echo "El archivo se subió correctamente";
}else{
echo "Hubo un error en la subida del archivo";
}
}else{
echo "Solo se admiten archivos jpg/jpeg";
}
}
}else{
echo "El documento no es una imagen";
}
?>
 |
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario