[Tutorial]Crear una Web para Subir Archivos[PHP]
Hola a todos, En este tutorial vamos a aprender a hacer un upload o subida de archivos usando PHP, nuestro upload tendra la capacidad de filtrar los tipos de archivo y no permitir subidas de mas del tamaño que le definamos, en el ejemplo haremos un script PHP para subir imagenes y luego mostrarlas al usuario.

diseño


Estructura
web

Manejaremos una estructura como la de la imagen, es necesario crear una carpeta donde almacenaremos los archivos, le pondremos un nombre determinado(/subidas) que luego definiremos en el script (index.php):


PHP

HTML



<html>
<body>
<form action="" method="post" enctype="multipart/form-data">
    <label for="file">Sube un archivo:</label>
    <input type="file" name="archivo" id="archivo" />
    <input type="submit" name="boton" value="Subir" />
</form>
<div class="resultado">
<-- Aqui ira el codigo PHP -->
</div>
</body>
</html>


Es de vital importancia definir el atributo enctype=”multipart/form-data” en la etiqueta form; de no ser así el upload no funcionara, en div.resultado saldrán los mensajes de error o de éxito.

español


PHP

El código PHP lo incluiremos justo debajo del formulario dentro del div.resultado, empezamos identificando el momento en que el formulario es enviado y el resto guíense por los comentarios del código:



<?php
if(isset($_POST['boton'])){
    
// Hacemos una condicion en la que solo permitiremos que se suban imagenes y que sean menores a 20 KB
    
if ((($_FILES["archivo"]["type"] == "image/gif") ||
    (
$_FILES["archivo"]["type"] == "image/jpeg") ||
    (
$_FILES["archivo"]["type"] == "image/pjpeg")) &&
    (
$_FILES["archivo"]["size"] < 20000)) {
 
    
//Si es que hubo un error en la subida, mostrarlo, de la variable $_FILES podemos extraer el valor de [error], que almacena un valor booleano (1 o 0).
      
if ($_FILES["archivo"]["error"] > 0) {
        echo 
$_FILES["archivo"]["error"] . "";
      } else {
        
// Si no hubo ningun error, hacemos otra condicion para asegurarnos que el archivo no sea repetido
        
if (file_exists("archivos/" $_FILES["archivo"]["name"])) {
          echo 
$_FILES["archivo"]["name"] . " ya existe. ";
        } else {
         
// Si no es un archivo repetido y no hubo ningun error, procedemos a subir a la carpeta /archivos, seguido de eso mostramos la imagen subida
          
move_uploaded_file($_FILES["archivo"]["tmp_name"],
          
"archivos/" $_FILES["archivo"]["name"]);
          echo 
"Archivo Subido ";
          echo 
"<img src="archivos/".$_FILES["archivo"]["name"]."">";
        }
      }
    } else {
        
// Si el usuario intenta subir algo que no es una imagen o una imagen que pesa mas de 20 KB mostramos este mensaje
        
echo "Archivo no permitido";
    }
}
?>


sistema

CSS

Esta es la parte en que le damos un poco de diseño al formulario, no es necesaria esta pare para su correcto funcionamiento, solo si le quieren dar diseño ... esta parte de codigo la agregaremos entre las etiquetas HEAD


<style type="text/css">
.upload{
background:#e7e7e7;
box-shadow:0px 0px 10px black;
width:500px;
height:200px;
margin-right:auto;
margin-left:auto;
border-radius:20px;

}
form{
        margin: 126px auto 0;
        width: 225px;
    }
    label{
        display: block;
    }
    input[type="file"]{
        display: block;
        margin: 8px 0;
    }
    div.resultado{
        margin: 25px auto 0;
        width: 225px;
    }
    div.resultado img{
        border: 2px solid #EEEEEE;
        height: auto;
        width: 225px;
    }
</style>


crear

CÓDIGO COMPLETO



<html>
<head>
<style type="text/css">
.upload{
background:#e7e7e7;
box-shadow:0px 0px 10px black;
width:500px;
height:200px;
margin-right:auto;
margin-left:auto;
border-radius:20px;

}
form{
        margin: 126px auto 0;
        width: 225px;
    }
    label{
        display: block;
    }
    input[type="file"]{
        display: block;
        margin: 8px 0;
    }
    div.resultado{
        margin: 25px auto 0;
        width: 225px;
    }
    div.resultado img{
        border: 2px solid #EEEEEE;
        height: auto;
        width: 225px;
    }
</style>
</head>
<body>
<div class="upload">
<form action="" method="post" enctype="multipart/form-data">
    <br><br>Sube un archivo:
    <input type="file" name="archivo" id="archivo" /> <br>
    <input type="submit" name="boton" value="Subir" />
</form>
<div>
<div class="resultado">
<?php
if(isset($_POST['boton'])){
    
// Hacemos una condicion en la que solo permitiremos que se suban imagenes y que sean menores a 20 KB
    
if ((($_FILES["archivo"]["type"] == "image/gif") || 
    (
$_FILES["archivo"]["type"] == "image/jpeg") || 
    (
$_FILES["archivo"]["type"] == "image/pjpeg")) && 
    (
$_FILES["archivo"]["size"] < 20000)) {
    
    
//Si es que hubo un error en la subida, mostrarlo, de la variable $_FILES podemos extraer el valor de [error], que almacena un valor booleano (1 o 0).
      
if ($_FILES["archivo"]["error"] > 0) {
        echo 
$_FILES["archivo"]["error"] . "<br />";
      } else {
          
// Si no hubo ningun error, hacemos otra condicion para asegurarnos que el archivo no sea repetido
          
if (file_exists("archivos/" $_FILES["archivo"]["name"])) {
            echo 
$_FILES["archivo"]["name"] . " ya existe. ";
          } else {
           
// Si no es un archivo repetido y no hubo ningun error, procedemos a subir a la carpeta /archivos, seguido de eso mostramos la imagen subida
            
move_uploaded_file($_FILES["archivo"]["tmp_name"],
            
"archivos/" $_FILES["archivo"]["name"]);
            echo 
"Archivo Subido <br />";
            echo 
"<img src='archivos/".$_FILES["archivo"]["name"]."' />";
          }
      }
    } else {
        
// Si el usuario intenta subir algo que no es una imagen o una imagen que pesa mas de 20 KB mostramos este mensaje
        
echo "Archivo no permitido";
    }
}
?>
</div>
</body>
</html>


upload

subir
Sígueme y entérate de todos mis aportes!

taringa

tutorial


gratis
Te gusta el diseño web?... Únete! --> Diseño Web Pro
archivos

chucky55
[Tutorial]Crear una Web para Subir Archivos[PHP]