Upload de una foto con AJAX usando la librería ajaxupload.js

Subir imágenes dinámicamente con AJAX y JQUERY

Publicado en Jquery 2018-03-28 19:23:56

Upload de una foto con AJAX usando la librería ajaxupload.js

Subir imágenes con Ajax Jquery

HTML Jquery

Resumen: Subir imágenes y almacenarlas en un servidor es muy importante, para luego ser recuperadas y mostrarlas; pues una solución es la librería ajaxupload.js

Una forma de subir imágenes al servidor de forma asíncrona es usando AJAX, una tecnología que nos permite refrescar determinadas secciones de una página web.

Este minitutorial comprende:

Implementación de la libreria JS ajaxupload.js que la podemos descargar del siguiente link y el código correspondiente es:

index.html

  • Carga la librería jquery
  • Carga la librería ajaxupload
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Subir Imagenes AJAX</title>
	<script src="js/jquery.js"></script>
	<script src="js/ajaxupload.js"></script>	
</head>
<body>
	<input type="hidden" name="urlfoto" id="urlfoto" value=""/>
	<script>
		$(function() {
		    var btn_firma = $('#addImage'), interval;
		    new AjaxUpload('#addImage', {
		    	action: 'class/upload.php?w=500&h=375&url=img',
		        onSubmit : function(file , ext){
			        if (! (ext && /^(jpg|png)$/.test(ext))){
			        	// extensiones permitidas
			        	alert('Sólo se permiten Imagenes .jpg o .png');
			        	// cancela upload
			        	return false;
			        } else {
			        	$('#loaderAjax').show();
			            btn_firma.text('Espere por favor');
			            this.disable();
			        }
		        },
		        onComplete: function(file, response){
		        	// alert(response);
		            btn_firma.text('Cambiar foto');
		            respuesta = $.parseJSON(response);
		            if(respuesta.respuesta == 'done'){
		            	$('#foto').removeAttr('scr');
		                $('#foto').attr('src','img/' + respuesta.fileName);
		                $('#loaderAjax').show();
		                $('#urlfoto').val(respuesta.fileName)
		            }else{
						alert(respuesta.mensaje);
		            }            
		            $('#loaderAjax').hide();
		            this.enable();
		        }
			});
		});
	</script>
	<img src="img/foto.jpg" name="foto" id="foto"><br>
	<button id="addImage">Subir Foto</button>
	<div class="loaderAjax" id="loaderAjax" style="display: none;">
		<img src="img/loading.gif">
		<span>Cargando foto...</span>
	</div>
</body>
</html>

La clase para subir o mover la imagen al servidor y redimensionarla a la medida que se envia en los parametros en este caso 500px por 375px

upload.php

<?php 
ini_set('display_errors',1);
error_reporting(E_ALL);
define("maxUpload", 4000000);
define("maxWidth", $_GET['w']);
define("maxHeight",$_GET['h']);
define("uploadURL","../".$_GET['url'].'/');
// Tipos MIME
$fileType = array('image/jpg','image/jpeg','image/pjpeg','image/png','image/gif');
// Bandera para procesar imagen
$pasaImgSize = false;
//bandera de error al procesar la imagen
$respuestaFile = false;
// nombre por default de la imagen a subir
$fileName = '';
// error del lado del servidor
$mensajeFile = 'ERROR EN EL SCRIPT';
// Obtenemos los datos del archivo
$tamanio 	= $_FILES['userfile']['size'];
$tipo 		= $_FILES['userfile']['type'];
$archivo 	= $_FILES['userfile']['name'];

// Tamaño de la imagen
$imageSize 	= getimagesize($_FILES['userfile']['tmp_name']);

// Verificamos la extensión del archivo independiente del tipo mime
$extension 	= explode('.',$_FILES['userfile']['name']);
$num = count($extension)-1;

//$imgFile=urls_amigables($archivo).".".$extension[$num];
$imgFile=$archivo;

// Verificamos el tamaño válido para los logotipos
if($imageSize[0] <= 5024 && $imageSize[1] <= 4468)
	$pasaImgSize = true;

// Verificamos el status de las dimensiones de la imagen a publicar
if($pasaImgSize == true)
{
	// Verificamos Tamaño y extensiones
	if(in_array($tipo, $fileType) && $tamanio>0 && $tamanio<=maxUpload && ($extension[$num]=='jpg' || $extension[$num]=='png' || $extension[$num]=='gif'))
	{
		// Intentamos copiar el archivo
		if(is_uploaded_file($_FILES['userfile']['tmp_name']))
		{
			if(move_uploaded_file($_FILES['userfile']['tmp_name'], uploadURL.$imgFile))
			{
				//////////////tratamiento de image redimensionamiento
				$target_path = uploadURL.$imgFile;
				require("../class/classimage.php");
				$resize = new resize($target_path);
				$resize->resizeImage(maxWidth,maxHeight,'crop');
				$resize-> saveImage($target_path,"72");											
				//////////////tratamiento de image				
				$respuestaFile 	= 'done';
				$fileName 		= $imgFile;
				$mensajeFile 	= $imgFile;
			
			}
			else
			{
				$mensajeFile = 'No se pudo subir el archivo';
			}
		}
		else
			// error del lado del servidor
			$mensajeFile = 'No se pudo subir el archivo';
	}
	else
		// Error en el tamaño y tipo de imagen
		$mensajeFile = 'Verifique el tamaño y tipo de imagen';
}
else
	// Error en las dimensiones de la imagen
	$mensajeFile = 'Verifique las dimensiones de la Imagen';

$salidaJson = array("respuesta" => $respuestaFile,
					"mensaje" => $mensajeFile,
					"fileName" => $fileName);
echo json_encode($salidaJson);
?>

Y por último tenemos la clase para redimensionar la clase

classimage.php

<?php
Class resize
{
    // *** Class variables
    private $image;
    private $width;
    private $height;
	private $imageResized;
 
    function __construct($fileName)
    {
        // *** Open up the file
        $this->image = $this->openImage($fileName);
 
        // *** Get width and height
        $this->width  = imagesx($this->image);
        $this->height = imagesy($this->image);
    }
	private function openImage($file)
{
    // *** Get extension
    $extension = strtolower(strrchr($file, '.'));
 
    switch($extension)
    {
        case '.jpg':
        case '.jpeg':
            $img = @imagecreatefromjpeg($file);
            break;
        case '.gif':
            $img = @imagecreatefromgif($file);
            break;
        case '.png':
            $img = @imagecreatefrompng($file);
            break;
        default:
            $img = false;
            break;
    }
    return $img;
}

public function resizeImage($newWidth, $newHeight, $option="auto")
{
 
    // *** Get optimal width and height - based on $option
    $optionArray = $this->getDimensions($newWidth, $newHeight, strtolower($option));
 
    $optimalWidth  = $optionArray['optimalWidth'];
    $optimalHeight = $optionArray['optimalHeight'];
 
    // *** Resample - create image canvas of x, y size
    $this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight);
    imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height);
 
    // *** if option is 'crop', then crop too
    if ($option == 'crop') {
        $this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight);
    }
}
private function getDimensions($newWidth, $newHeight, $option)
{
 
   switch ($option)
    {
        case 'exact':
            $optimalWidth = $newWidth;
            $optimalHeight= $newHeight;
            break;
        case 'portrait':
            $optimalWidth = $this->getSizeByFixedHeight($newHeight);
            $optimalHeight= $newHeight;
            break;
        case 'landscape':
            $optimalWidth = $newWidth;
            $optimalHeight= $this->getSizeByFixedWidth($newWidth);
            break;
        case 'auto':
            $optionArray = $this->getSizeByAuto($newWidth, $newHeight);
            $optimalWidth = $optionArray['optimalWidth'];
            $optimalHeight = $optionArray['optimalHeight'];
            break;
        case 'crop':
            $optionArray = $this->getOptimalCrop($newWidth, $newHeight);
            $optimalWidth = $optionArray['optimalWidth'];
            $optimalHeight = $optionArray['optimalHeight'];
            break;
    }
    return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}

private function getSizeByFixedHeight($newHeight)
{
    $ratio = $this->width / $this->height;
    $newWidth = $newHeight * $ratio;
    return $newWidth;
}
 
private function getSizeByFixedWidth($newWidth)
{
    $ratio = $this->height / $this->width;
    $newHeight = $newWidth * $ratio;
    return $newHeight;
}
 
private function getSizeByAuto($newWidth, $newHeight)
{
    if ($this->height < $this->width)
    // *** Image to be resized is wider (landscape)
    {
        $optimalWidth = $newWidth;
        $optimalHeight= $this->getSizeByFixedWidth($newWidth);
    }
    elseif ($this->height > $this->width)
    // *** Image to be resized is taller (portrait)
    {
        $optimalWidth = $this->getSizeByFixedHeight($newHeight);
        $optimalHeight= $newHeight;
    }
    else
    // *** Image to be resizerd is a square
    {
        if ($newHeight < $newWidth) {
            $optimalWidth = $newWidth;
            $optimalHeight= $this->getSizeByFixedWidth($newWidth);
        } else if ($newHeight > $newWidth) {
            $optimalWidth = $this->getSizeByFixedHeight($newHeight);
            $optimalHeight= $newHeight;
        } else {
            // *** Sqaure being resized to a square
            $optimalWidth = $newWidth;
            $optimalHeight= $newHeight;
        }
    }
 
    return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}
 
private function getOptimalCrop($newWidth, $newHeight)
{
 
    $heightRatio = $this->height / $newHeight;
    $widthRatio  = $this->width /  $newWidth;
 
    if ($heightRatio < $widthRatio) {
        $optimalRatio = $heightRatio;
    } else {
        $optimalRatio = $widthRatio;
    }
 
    $optimalHeight = $this->height / $optimalRatio;
    $optimalWidth  = $this->width  / $optimalRatio;
 
    return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}

private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight)
{
    // *** Find center - this will be used for the crop
    $cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 );
    $cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 );
 
    $crop = $this->imageResized;
    //imagedestroy($this->imageResized);
 
    // *** Now crop from center to exact requested size
    $this->imageResized = imagecreatetruecolor($newWidth , $newHeight);
    imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight);
}
public function saveImage($savePath, $imageQuality="100")
{
    // *** Get extension
    $extension = strrchr($savePath, '.');
    $extension = strtolower($extension); 
    switch($extension)
    {
        case '.jpg':
        case '.jpeg':
            if (imagetypes() & IMG_JPG) {
                imagejpeg($this->imageResized, $savePath, $imageQuality);
            }
            break; 
        case '.gif':
            if (imagetypes() & IMG_GIF) {
                imagegif($this->imageResized, $savePath);
            }
            break; 
        case '.png':
            // *** Scale quality from 0-100 to 0-9
            $scaleQuality = round(($imageQuality/100) * 9);
 
            // *** Invert quality setting as 0 is best, not 9
            $invertScaleQuality = 9 - $scaleQuality; 
            if (imagetypes() & IMG_PNG) {
                imagepng($this->imageResized, $savePath, $invertScaleQuality);
            }
            break; 
        default:
            // *** No extension - No save.
            break;
    }
 
    imagedestroy($this->imageResized);
}
}
?>

 

Redacción:| Artículo leído: 124 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de Jquery