Carga de imágenes con Ajax usando PHP y jQuery

En esta publicación del blog, hemos cubierto uno de los temas mas interesantes de ajax, es decir la, Carga de imágenes con Ajax usando PHP y jQuery  sin actualizar la página.

Descripción

En este proceso, la imagen se selecciona primero y se previsualiza antes de almacenarla en cualquier ubicación. Luego, usando jQuery Ajax, se envía al script php en el evento de envío del botón de nuestro formulario.

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

Aquí aplicamos algunas validaciones en el archivo seleccionado, para verificar si es un archivo de imagen (jpg, jpeg o png) o cualquier otro tipo de archivo.

Se permite cargar archivos de tamaño  de hasta 100 Kb.

Los siguientes pasos se realizan en este proceso:

1. Incluir la biblioteca jQuery.

2. Creación de página HTML con campo de carga archivos.

3. Código jQuery Ajax.

4. Script PHP para almacenar la imagen.

A continuación se muestra nuestro código completo con la opción de demostración en vivo y descarga

DESCARGAR ARCHIVOS

index.php: Página HTML que contiene el campo de carga de archivos.

<html>
<head>
<title>Carga de imágenes con Ajax usando PHP y jQuery</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="main">
<h1>Carga de imágenes Ajax</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview" ><img id="previewing" src="noimage.png" /></div>
<hr id="line" >
<div id="selectImage">
<label>Selecciona tu imagen</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Subir imágen" class="submit" />
</div>
</form>
</div>
<h4 id='loading' >Cargando..</h4>
<div id="message"></div>
</body>
</html>

Código jQuery completo: script.js

$(document).ready(function (e) {
	$("#uploadimage").on('submit',(function(e) {
		e.preventDefault();
		$("#message").empty(); 
		$('#loading').show();
		$.ajax({
        	url: "ajax_php_file.php",   	// URL a la que se envía la solicitud
			type: "POST",      				// Tipo de solicitud que se enviará, llamado como método 
			data:  new FormData(this), 		// Datos enviados al servidor 
			contentType: false,       		// El tipo de contenido utilizado al enviar datos al servidor. El valor predeterminado es: "application / x-www-form-urlencoded"
    	    cache: false,					// Para no poder solicitar que las páginas se almacenen en caché
			processData:false,  			// Para enviar DOMDocument o archivo de datos no procesados, se establece en falso (es decir, los datos no deben estar en forma de cadena)
			success: function(data)  		// Una función a ser llamada si la solicitud tiene éxito
		    {
			$('#loading').hide();
			$("#message").html(data);			
		    }	        
	   });
	}));

// Función para previsualizar la imagen
	$(function() {
        $("#file").change(function() {
			$("#message").empty();         // Para eliminar el mensaje de error anterior
			var file = this.files[0];
			var imagefile = file.type;
			var match= ["image/jpeg","image/png","image/jpg"];	
			if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
			{
			$('#previewing').attr('src','noimage.png');
			$("#message").html("<p id='error'>Selecciona un archivo de imagen válido</p>"+"<h4>Nota</h4>"+"<span id='error_message'>Solo jpeg, jpg y png Tipo de imágenes permitidas</span>");
			return false;
			}
            else
			{
                var reader = new FileReader();	
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }		
        });
    });
	function imageIsLoaded(e) { 
		$("#file").css("color","green");
        $('#image_preview').css("display", "block");
        $('#previewing').attr('src', e.target.result);
		$('#previewing').attr('width', '250px');
		$('#previewing').attr('height', '230px');
	};
});

Script PHP que procesa los datos enviados mediante ajax: ajax_php_file.php

<?php
if(isset($_FILES["file"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
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']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
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>";
}
}
}
else
{
echo "<span id='invalid'>***Invalid file Size or Type***<span>";
}
}
?>

Código CSS: style.css

body {
font-family: 'Raleway', sans-serif;
}
h1
{
text-align: center;
background-color: #27ae60;
height: 70px;
color: white;
margin: 0 0 -29px 0;
padding-top: 14px;
border-radius: 10px 10px 0 0;
font-size: 35px;
}
.main {
position: absolute;
top: 50px;
left: 20%;
width: 450px;
height:530px;
border: 2px solid #27ae60;
border-radius: 10px;
}
.main label{
color: white;
margin-left: 60px;
}
#image_preview{
position: absolute;
font-size: 30px;
top: 100px;
left: 100px;
width: 250px;
height: 230px;
text-align: center;
line-height: 180px;
font-weight: bold;
color: #C0C0C0;
background-color: #FFFFFF;
overflow: auto;
}
#selectImage{
padding: 22px 21px 14px 15px;
position: absolute;
bottom: 0px;
width: 414px;
background-color: #27ae60;
border-radius: 10px;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
#file {
color: white;
padding: 5px;
margin-top: 10px;
border-radius: 5px;
margin-left: 14%;
width: 72%;
}
#message{
position:absolute;
top:120px;
left:815px;
}
#success
{
color:green;
}
#invalid
{
color:red;
}
#line 
{
margin-top:288px;
}
#error
{
color:red;
}
#error_message
{
color:blue;
}
#loading
{
display:none;
position:absolute;
top:50px;
left:850px;
font-size:25px;
}
hr{
	border-top: 1px solid  #27ae60;
}

Conclusión:
En este post hemos cubierto un tema básico de ajax, como lo es la carga de imágenes usando php con validaciones aplicadas en el código. Esperamos que este ejemplo te haya funcionado para que entiendas la funcionalidad de las propiedades de Ajax.