Cómo subir una imagen con jQuery, Ajax y PHP

Cómo subir una imagen con jQuery, Ajax y PHP

HTML, Javascript, jQuery, PHP

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

Escribe una respuesta