Es común que el usuario necesite subir una imagen en un formulario web, tanto en frontend como en backend. El método tradicional era enviar un formulario y que mediate PHP se ejecutaran las acciones pertinentes para subir la imagen a un directorio del servidor.

En este caso lo haremos utilizando jQuery y Ajax para que no sea necesario recargar la ventana.

Código HTML

El código HTML es muy simple, ya que en este caso sólo se trata de un ejemplo.

<div class="container mt-5">
		<div class="row">
			<div class="col-md-12">
				<div class="announce"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<form method="post" action="#" enctype="multipart/form-data">
					<div class="card" style="width: 25rem;">
						<img class="card-img-top" src="https://via.placeholder.com/150">
						<div class="card-body">
							<div class="form-group">
								<label for="image">Upload image</label>
								<input type="file" class="form-control-file mt-2" name="image" id="image">
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

Código Javascript

Con jQuery detectaremos cuándo el usuario selecciona una imagen y ejecutaremos la llamada Ajax contra el servidor.

Si la respuesta comienza por la cadena [ERROR] sabremos que la imagen no se ha subido correctamente. Por el contrario, recibiremos la url de la imagen que acabamos de subir.

$(document).ready(function() {
			$("#image").on('change', function() {				
				$(".announce").html('<div class="alert alert-info">Process...</div>');
				var formData = new FormData();
				var files = $('#image')[0].files[0];
				formData.append('file',files);
				$.ajax({
					url: 'upload.php',
					type: 'post',
					data: formData,
					contentType: false,
					processData: false,
					async: false,
					success: function(response) {
						if (response.slice(0, 7) != "[ERROR]") {
							$(".announce").html('<div class="alert alert-success">Uploaded OK</div>');
							$(".card-img-top").attr("src", response);
						} else {
							var error_str = response.replace("[ERROR]", "");
							$(".announce").html('<div class="alert alert-danger">An error has ocurred: <b>' + error_str + '</b></div>');
						}
					}
				});
				return false;
			});
		});

Código PHP

En nuestro código PHP realizaremos las validaciones necesarias para poder ejecutar la subida y devolver una respuesta al cliente.

Tendremos un directorio llamado images en el que se almacenarán las imágenes. En este ejemplo no se comprueba si la imagen ya existe.

<?php

// Definitions
$accept_types = array(
	"image/pjpeg",
	"image/jpeg",
	"image/png",
	"image/gif",
);

$to_path = "images";

// Check directory
if(!is_dir($to_path)){
	echo "[ERROR]Internal directory not exists";
	return;
}

// Check file type
if(!in_array($_FILES["file"]["type"], $accept_types)){
	echo "[ERROR]The file type is not accepted";
	return;
}

// Move the file
if (move_uploaded_file($_FILES["file"]["tmp_name"], $to_path . "/" . $_FILES['file']['name'])) {
	echo $to_path."/".$_FILES['file']['name'];
	return;
}

// Default error
echo "[ERROR]Move image failed!";

Vista previa