BaulPHP

Menu
  • PHP Ejemplos
    • PHP tutoriales
    • MYSQL
  • DESCARGAS
  • HTML5
  • Contáctanos
  • Iniciar Sesión

Subir imágenes al servidor con PHP y jQuery

Subir imágenes al servidor con PHP y jQuery
Valorar Entrada

CompartirTweet

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

Tabla de Contenidos

  • 1 Subir imágenes al servidor con PHP y jQuery
    • 1.1 ¿Qué recursos necesito para que esto funcione?
    • 1.2 Partes de este sistema
      • 1.2.1 Declaración de librerías externas
      • 1.2.2 Formulario creado en HTML
    • 1.3 El archivo carga.php
    • 1.4 CONCLUSIÓN
    • 1.5 DESCARGA

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

1
2
3
4
5
6
7
<!-- 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>

  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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
Subir imágenes al servidor con PHP y jQuery
Valorar Entrada

Share
Tweet
Pinterest
Linkedin
Email
Entrada Previa
Siguiente Entrada

Related Articles

Concatenación PHP Concepto con ejemplos

Concatenación PHP: Concepto con ejemplos

Cómo Instanciar Objetos De Una Clase Con PHP

Cómo Instanciar Objetos De Una Clase PHP

Fatal error Call to undefinedmethod mysqli error

Fatal error Call to undefined method mysqli error()

Paginación usando PHP MySqli Bootstrap

Paginación usando PHP MySqli Bootstrap

Deja una respuesta

Cancelar respuesta

Anuncios

Recientes

  • PHP CRUD usando OOP con MySQLi en MVC
  • Sistema de chat en vivo con Ajax, PHP y MySQL

Lo más visto

  • Sistema de chat en vivo con Ajax, PHP y MySQL
    Sistema de chat en vivo con Ajax, …
  • PHP CRUD usando OOP con MySQLi en MVC
    PHP CRUD usando OOP con MySQLi en …

BaulPHP

Blog de programación, desarrollo web, tutoriales, PHP, MySQL, jQuery, Ajax, WordPress, Drupal, CodeIgniter y Demostraciones
Copyright © 2019 BaulPHP
Creado por BaulPHP