Subir imágenes al servidor con PHP y jQuery

Subir imágenes al servidor con PHP y jQuery. En este artículo tocaremos el tema de “Subir imágenes al servidor con PHP y jQuery”.Sin embargo, utilizaremos librerías para que esa carga de imágenes se ejecute sin refrescar la página web o sistema web.

¿Cómo funciona este proceso?

El usuario presiona el input de tipo file que es el encargado de mostrar el explorador de archivos para que seleccione la imagen a cargar. La imagen elegida con ayuda del jQuery nos generara una vista previa, antes de realizar el proceso de la subida al servidor. Por lo tanto, usando jQuery Ajax, la información recogida por el formulario se envía al script php que realizará el proceso.

Subir imágenes al servidor con PHP y jQuery

El script PHP almacena la imagen en una ubicación definida en una variable y devuelve el mensaje de éxito o el mensaje de error del proceso.

Ahora, cuando la imagen es enviada al código PHP, aplicaremos algunas validaciones en el archivo seleccionado, para verificar si es un archivo de imagen (jpg, jpeg o png) o cualquier otro tipo de archivo. Sin olvidarnos también el tamaño máximo es de 100KB. Ustedes pueden configurarlo a su antojo.

¿Qué recursos necesito para que esto funcione?

1. Agregar a nuestro archivo HTML librerías jQuery.
2. Un archivo HTML con un formulario web que recogerá la información para el proceso.
3. Lenguaje PHP que será el encargado de procesar la imagen y subir al servidor.

Partes de este sistema

1. Declaración de librerías externas

Estas librerías de estilo y lenguaje jQuery se declara en la etiqueta head de nuestro HTML

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="assets/css/style.css" />
<link href="assets/css/sticky-footer-navbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>

2. Formulario creado en HTML

Este formulario será el encargado de recopilar la información que luego será procesada por el lenguaje jQuery y PHP

<!-- Contenido --> 
<div class="main">
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview" ><img id="previewing" src="imagen/no-image.jpg" width="250" height="230" /></div>
<hr id="line" >
<div id="selectImage">
  <div class="form-group">
    <label for="exampleFormControlFile1">Selecciona una imagen</label>
    <input type="file" class="form-control-file" id="file" name="file">
  </div>
<div class="form-group">  
<input type="submit" value="Cargar imagen" class="btn btn-primary mb-2" />
</div>
</div>
</form>
</div>
<!-- Fin Contenido -->

3. El archivo carga.php

Este fichero será en motor del sistema porque procesar la información para subir al servidor web

if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <span id='invalid'><b>Archivo ya existe.</b></span> ";
}
else
{
$sourcePath = $_FILES['file']['tmp_name']; // Ruta del fichero
$targetPath = "upload/".$_FILES['file']['name']; // Destino de la imagen cargada
move_uploaded_file($sourcePath,$targetPath) ; // Mover el fichero a destino
echo "<span id='success'>Imagen subida satisfactoriamente...!!</span><br/>";
echo "<br/><b>Arhivo:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Tipo:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Tamaño:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Archivo temporal:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
}

Subir imágenes al servidor con PHP y jQuery

CONCLUSIÓN

Hoy en día, con el avance de la tecnología todo va cambiando en el entorno web. Por lo tanto, si somos observadores los sistemas web está creciendo rápidamente en estos últimos años.

• Por versatilidad
• El costo muy bajo
• Flexibilidad, porque desde cualquier parte del mundo puedo acceder a la información.

Bancos, empresas públicas y estatales apuestan por estos sistemas.

Sin embargo, aquí usaremos jQuery y Ajax para subir imágenes sin actualizar la página actual.  Espero que esta breve explicación les ayude bastante en sus proyectos web.

DESCARGA