Portada » JQuery biblioteca de JavaScript » Subir imágenes al servidor con PHP y jQuery

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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
  1. 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 -->
  1. 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
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

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

1 comentario en “Subir imágenes al servidor con PHP y jQuery”

  1. como puedo hacer, especificar que nombre quiero que lleve mediante una etiqueta ejemplo $name este lo jalaría de una base de datos el cual seria el nombre del usuario para que se llame la imagen igual que el usuario y cada que suba sea el mismo nombre solo sobre escribirlo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad