Bienvenid@s, hoy veremos un sencillo ejemplo de como obtener las dimensiones (anchura y altura) de una imagen con PHP, para ello utilizaremos la funcion getimagesize(src), esta función nos retornará un array con información de la imagen, entre la información que regresa se encuentran la anchura y la altura, así como los bits de la imagen y el tipo mime al que pertenece.
La anchura de la imagen se encuentra en el index 0 y la altura en el index 1 del array devuelto.
A continuación puedes ver un ejemplo:
// Ruta de la imagen
$src = "php.png";
//Obtenemos información de la imagen
$info = getimagesize($src);
//Anchura -> $info[0]
//Altura -> $info[1]
print "<p>Examinando la imagen <strong>$src</strong></p>";
//Extraemos toda la información
foreach ($info as $key => $val)
{
print "<p>$key => $val</p>";
}
Bienvenid@s, hoy os traigo un ejemplo de como realizar una subida múltiple de imágenes, los archivos a subir son validados tanto del lado del cliente con Javascript como del lado del servidor con PHP sólo permitiendo imágenes y con unas determinadas características, se mostrará una vista previa de las imágenes a subir, la petición se hará a través de la tecnología AJAX.
El ejemplo ha sido extraido del siguiente vídeo:
El ejemplo se compone de dos archivos "multiple.php" que es donde se encuentra el formulario con el campo file múltiple y el código Javascript/jQuery para validar los archivos a subir y realizar la petición ajax al archivo "multiple-ajax.php" que es desde donde también validaremos los archivos enviados y los guardaremos en la carpeta "imagenes" en caso de ser imágenes válidas.
multiple.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#file").on("change", function(){
/* Limpiar vista previa */
$("#vista-previa").html('');
var archivos = document.getElementById('file').files;
var navegador = window.URL || window.webkitURL;
/* Recorrer los archivos */
for(x=0; x<archivos.length; x++)
{
/* Validar tamaño y tipo de archivo */
var size = archivos[x].size;
var type = archivos[x].type;
var name = archivos[x].name;
if (size > 1024*1024)
{
$("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>");
}
else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif')
{
$("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>");
}
else
{
var objeto_url = navegador.createObjectURL(archivos[x]);
$("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>");
}
}
});
$("#btn").on("click", function(){
var formData = new FormData($("#formulario")[0]);
var ruta = "multiple-ajax.php";
$.ajax({
url: ruta,
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(datos)
{
$("#respuesta").html(datos);
}
});
});
});
</script>
</head>
<body>
<form method="post" id="formulario" enctype="multipart/form-data">
Subir imagen: <input type="file" id="file" name="file[]" multiple>
<button type="button" id="btn">Subir imágenes</button>
</form>
<div id="vista-previa"></div>
<div id="respuesta"></div>
</body>
</html>
multiple-ajax.php
<?php
if (isset($_FILES["file"]))
{
$reporte = null;
for($x=0; $x<count($_FILES["file"]["name"]); $x++)
{
$file = $_FILES["file"];
$nombre = $file["name"][$x];
$tipo = $file["type"][$x];
$ruta_provisional = $file["tmp_name"][$x];
$size = $file["size"][$x];
$dimensiones = getimagesize($ruta_provisional);
$width = $dimensiones[0];
$height = $dimensiones[1];
$carpeta = "imagenes/";
if ($tipo != 'image/jpeg' && $tipo != 'image/jpg' && $tipo != 'image/png' && $tipo != 'image/gif')
{
$reporte .= "<p style='color: red'>Error $nombre, el archivo no es una imagen.</p>";
}
else if($size > 1024*1024)
{
$reporte .= "<p style='color: red'>Error $nombre, el tamaño máximo permitido es 1mb</p>";
}
else if($width > 500 || $height > 500)
{
$reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura máxima permitida es de 500px</p>";
}
else if($width < 60 || $height < 60)
{
$reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura mínima permitida es de 60px</p>";
}
else
{
$src = $carpeta.$nombre;
move_uploaded_file($ruta_provisional, $src);
echo "<p style='color: blue'>La imagen $nombre ha sido subida con éxito</p>";
}
}
echo $reporte;
}
Bienvenid@s, hoy veremos un ejemplo de como subir varias imágenes con AJAX y como mostrar una vista previa de las imágenes antes de subirlas. Para mostrar la vista previa de las imágenes utilizaremos jQuery y Javascript, para ello detectaremos el evento "change" del input file, también validaremos del lado del cliente el tamaño máximo permitido que será 1MB y el tipo de archivo del que se trata, sólo permitidos jpg|jpeg|png|gif.
Una vez seleccionadas las imágenes que queremos subir, es momento de realizar la petición ajax, que la haremos al hacer click en botón del formulario a un archivo llamado "multiple-ajax.php" desde el cual recorreremos una a una las imágenes subidas, con php también validaremos los archivos a subir, verificando el tamaño máximo permitido 1MB, el tipo de archivo permitido: jpg|jpeg|gif|png y validaremos las dimensiones de la imagen, es decir, para que la imagen sea aceptada deberá no ser superior en su anchura o altura a 500px ni inferior a 60px.
Las imágenes serán guardadas en una carpeta llamada "imagenes", los archivos que intervienen son "index.php" desde donde realizaremos la petición AJAX a "multiple-ajax.php".
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#file").on("change", function(){
/* Limpiar vista previa */
$("#vista-previa").html('');
var archivos = document.getElementById('file').files;
var navegador = window.URL || window.webkitURL;
/* Recorrer los archivos */
for(x=0; x<archivos.length; x++)
{
/* Validar tamaño y tipo de archivo */
var size = archivos[x].size;
var type = archivos[x].type;
var name = archivos[x].name;
if (size > 1024*1024)
{
$("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>");
}
else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif')
{
$("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>");
}
else
{
var objeto_url = navegador.createObjectURL(archivos[x]);
$("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>");
}
}
});
$("#btn").on("click", function(){
var formData = new FormData($("#formulario")[0]);
var ruta = "multiple-ajax.php";
$.ajax({
url: ruta,
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(datos)
{
$("#respuesta").html(datos);
}
});
});
});
</script>
</head>
<body>
<form method="post" id="formulario" enctype="multipart/form-data">
Subir imagen: <input type="file" id="file" name="file[]" multiple>
<button type="button" id="btn">Subir imágenes</button>
</form>
<div id="vista-previa"></div>
<div id="respuesta"></div>
</body>
</html>
multiple-ajax.php
<?php
if (isset($_FILES["file"]))
{
$reporte = null;
for($x=0; $x<count($_FILES["file"]["name"]); $x++)
{
$file = $_FILES["file"];
$nombre = $file["name"][$x];
$tipo = $file["type"][$x];
$ruta_provisional = $file["tmp_name"][$x];
$size = $file["size"][$x];
$dimensiones = getimagesize($ruta_provisional);
$width = $dimensiones[0];
$height = $dimensiones[1];
$carpeta = "imagenes/";
if ($tipo != 'image/jpeg' && $tipo != 'image/jpg' && $tipo != 'image/png' && $tipo != 'image/gif')
{
$reporte .= "<p style='color: red'>Error $nombre, el archivo no es una imagen.</p>";
}
else if($size > 1024*1024)
{
$reporte .= "<p style='color: red'>Error $nombre, el tamaño máximo permitido es 1mb</p>";
}
else if($width > 500 || $height > 500)
{
$reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura máxima permitida es de 500px</p>";
}
else if($width < 60 || $height < 60)
{
$reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura mínima permitida es de 60px</p>";
}
else
{
$src = $carpeta.$nombre;
move_uploaded_file($ruta_provisional, $src);
echo "<p style='color: blue'>La imagen $nombre ha sido subida con éxito</p>";
}
}
echo $reporte;
}
Bienvenid@s, hoy veremos un ejemplo de como subir imágenes al servidor mediante AJAX, esto puede ser útil para permitir por ejemplo a los usuarios que han iniciado sesión cambiar la foto de perfil. Para el ejemplo crea una carpeta en htdocs, en su interior crea una carpeta llamada imágenes que es donde iremos guardando las imágenes que vayamos subiendo, también vamos a crear dos archivos, uno llamado index.php que es donde se encontrará el formulario con el input file y el otro se llamará imagen-ajax.php que es donde realizaremos la petición AJAX.
Se puederecuperar información de unarchivo de imagen alojado enun servidor remoto mediantela extensióncURLenviando peticiones HTTPalservidor.
No sólorecupera los metadatos igual quela funcióngetimagesize()original,sino que tambiéndevuelve el tamañodel archivo de imagen.
Esta clasees útilcuando se requiereinformación delas imágenes alojadas en servidores remotos para comprobarel tamaño del archivode imagen, las dimensiones y el tipo de extensión de imagen paraposibles restricciones de publicación.
Para el correcto funcionamiento de la clase se requiere:
* PHP 5.4+ * Activar la extensión GD
* Activar la extensión cURL
Al descargar el fichero, podrás testearlo a través del archivo test_img_info.php, que si tu servidor cumple con todos los requerimientos citados anteriormente, regresará un array con la información de la imagen remota ...
La clase principal puede interactuar con otras clases de plugins que pueden proporcionar un extra de funcionalidad para la manipulación de las imágenes.
Actualmentelas clasesde pluginpueden realizaroperaciones de imagencomo lanzar, cambiar el tamaño, añadir texto yaplicarfiltros comoafilar, relieve, negar, gray_scale, brillo, contraste, colores,detección de bordes,boceto,y el efectode la sepia, que como se comentó anteriormente pueden ser completados añadiéndole más funcionalidad.
Nosotros vamos a ver un ejemplo de como utilizar PHP Image Editor con la clase plugin que viene por defecto, el código del plugin lo puedes ver entrando en la carpeta plugins y abriendo el archivo, SE_effects.php, que contiene una serie de métodos ya predefinidos como afilar, relieve, etc, ya comentado anteriormente.
Por ejemplo, como imagen voy a utilizar la siguiente imagen la cual he guardado en la carpeta donde tengo alojado PHP Image Editor ...
include 'image_editor.php';
//Iniciamos la clase
$se=new SImEdi('bootstrap.jpg');
//Cargamos la clase plugin con los efectos: SE_effects.php
$se->plugin('effects');
//Aplicamos un efecto blur a la imagen
$se->effects->blur(50);
//Guardamos la imagen
$se->save('bootstrap-blur.jpg');
El resultado de la imagen es un efecto blur al 50% ...
Todos los efectos son métodos que podéis ver en el archivo que se encuentra en la ruta plugins/SE_effects.php, ahora veremos como aplicar un efecto sepia ...
include 'image_editor.php';
//Iniciamos la clase
$se=new SImEdi('bootstrap.jpg');
//Cargamos la clase plugin con los efectos: SE_effects.php
$se->plugin('effects');
//Aplicamos un efecto sepia
$se->effects->sepia(); //Este método no acepta parámetros ver la clase SE_effects.php
//Guardamos la imagen
$se->save('bootstrap-sepia.jpg');
Ok, como podemos ver estamos aplicando efectos a la imagen de un modo bastante práctico, ahora vamos a ver otro efecto llamado emboss este efecto al igual que el anterior no acepta parámetros ...
include 'image_editor.php';
//Iniciamos la clase
$se=new SImEdi('bootstrap.jpg');
//Cargamos la clase plugin con los efectos SE_effects.php
$se->plugin('effects');
//Aplicamos un efecto emboss
$se->effects->emboss(); //Este método no acepta parámetros ver la clase SE_effects.php
//Guardamos la imagen
$se->save('bootstrap-emboss.jpg');
Todos los métodos para efectos disponibles en el plugin SE_effects.php son los siguientes ...
Bienvenid@s, hoy vamos a ver un ejemplo de como forzar la descarga de archivos a través de cabeceras HTTP, precisamente la descarga de imágenes con extensión jpg|png|gif , en el switch como default se incluye application/force-download, que va a permitir descargar cualquier archivo, no es aconsejable si lo que quieres permitir es la descarga de un tipo o tipos de archivos en concreto, ya que con force-download podrías descargar por ejemplo un .exe u otro cualquier archivo que se te antoje.
En definitivo aquí os dejo el código de ejemplo para que lo amolden a sus necesidades ...
/*Forzar descarga de archivos*/
/*Ruta de la imagen*/
$ruta = 'php-o.png';
/*Información de la imagen para obtener la extensión*/
$info = pathinfo($ruta);
/* Obtener la extensión */
$ext = strtolower($info["extension"]);
switch($ext)
{
case 'png':
$tipo = 'image/png';
break;
case 'jpg':
$tipo = 'image/jpg';
break;
case 'gif':
$tipo = 'image/gif';
break;
default:
/* Para descargar cualquier tipo de archivo
si quieres que se descarguen sólo imágenes
quita esta parte de aquí */
$tipo = 'application/force-download';
break;
}
$size = filesize($ruta);
header('Pragma: public');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0'); /*Para algunos navegadores*/
header('Cache-Control: private', false); /*Para algunos navegadores*/
header('content-type: '.$tipo.'');
header('content-disposition: attachment; filename="'.basename($ruta).'"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: '.$size);
readfile($ruta);
