Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/04/2012, 07:21
Avatar de truman_truman
truman_truman
 
Fecha de Ingreso: febrero-2010
Ubicación: /home/user
Mensajes: 1.341
Antigüedad: 14 años, 9 meses
Puntos: 177
[APORTE][Codeigniter] Redimensionar imagen grandes antes de subir y crear miniatura

Hola a todos, logré integrar Agile-uploader con Codeigniter, para subir imagenes que sean muy pesadas.
Lo que hace Agile-uploader es redimensionar la imagen antes de subirla al servidor, esto nos sirve para cuando queremos
subir imagenes tomadas con un camara digital, cuyo tamaño es de 2 MB o mas, y esto hace que sobrepase el tiempo de
ejecución de php haciendo fallido el upload.

En este ejemplo he implementado la opción de single, osea subir solo una imagen por vez, aunque Agile-uploader permite
subir multiples imagenes al mismo tiempo, pero esto lo dejaremos para más adelante



NOTA: Deberemos tener cargado el Helper 'url'





En primer lugar descargamos el agile-uploader
http://www.shift8creative.com/projec...der/index.html

Creamos una carpeta llamada uploads en la raiz del sitio, y dentro de ella, creamos otra llamada mini (para las minuaturas)
Luego creamos una carpeta llamada agile_up en la raiz del sitio, en donde pondremos los siguientes archivos que
hemos descargado

add-file.png
agile-uploader-3.0.js
agile-uploader.css
agile-uploader.swf
file-icon.png
jquery-1.4.min.js
jquery.flash.min.js
trash-icon.png
unrelated.css

En el archivo agile-uploader-3.0.js buscamos la funcion $.fn.agileUploader.defaults aproximadamente en la línea 362.
en la siguiente línea deberemos incluir la ruta completa
Así está por defecto

flashSrc: 'agile-uploader.swf',

y así la he puesto yo, (sino no funciona) si alguien sabe como poner aquí la ruta base_url() de codeigniter que lo diga,
ya que este es un archivo .js no pude incluir codigo php, entonces la escribí a mano:

flashSrc: 'http://localhost/ci/agile_up/agile-uploader.swf',

En esta misma funcion están las medidas de remimension

flashVars: {
max_height: 900,
max_width: 900,

solo cambienlas a su gusto





Siguiente paso, crear el controlador, lo he llamado agile.php

Código PHP:
<?php

class Agile extends CI_Controller {

    function 
__construct() {
        
parent::__construct();               
    }

    function 
index() {
        
$this->load->view('agile/single', array('error' => ' '));
    }

    function 
do_upload() {

        
//upload
        
$config['upload_path'] = './uploads/';
        
$config['allowed_types'] = 'gif|jpg|jpeg|png';
        
$config['max_size'] = '0';
        
$config['max_width'] = '0';
        
$config['max_height'] = '0';
        
$this->load->library('upload'$config);
        
        if (!
$this->upload->do_upload('Filedata')) {
            
            echo 
'ERROR; ';
            
        } else {


            
$data = array('upload_data' => $this->upload->data());

            
//miniaturas
            
$config = array();
            
$config['image_library'] = 'gd2';
            
$config['source_image'] = $data['upload_data']['full_path'];
            
$config['new_image'] = $data['upload_data']['file_path'] . 'mini/';
            
$config['create_thumb'] = TRUE;
            
$config['maintain_ratio'] = TRUE;
            
$config['width'] = 75;
            
$config['height'] = 50;
            
$config['thumb_marker'] = '';
            
$this->load->library('image_lib'$config);
            
$this->image_lib->resize();           
            
        }
    }

    function 
result() {
        echo 
'<p>Cargar alguna vista aquí... FUNCIONÓ!!!</p>';
    }

}
NOTA: el campo FILE en donde viaja la imagen se llama Filedata, por eso cuando acemos el upload se lo indicamos a la funcion $this->upload->do_upload('Filedata')


Creamos una vista, incluimos todos los .js y css

Código PHP:
<html>
<head>
    <script src="<?php echo base_url()?>agile_up/jquery-1.4.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url()?>agile_up/jquery.flash.min.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="<?php echo base_url()?>agile_up/unrelated.css" />
    
    <script src="<?php echo base_url()?>agile_up/agile-uploader-3.0.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="<?php echo base_url()?>agile_up/agile-uploader.css" />
</head>
<body>


<form id="singularDemo" enctype="multipart/form-data" >
<div id="single"></div>

</form>    
    
<a href="#" onClick="document.getElementById('agileUploaderSWF').submit();">Submit</a>
   
    <script type="text/javascript">
        $('#single').agileUploaderSingle({
            submitRedirect: '<?php echo base_url()?>agile/result',
            formId: 'singularDemo',
        progressBarColor: '#00ff00',
            flashVars: {
            firebug: true,
                form_action: '<?php echo base_url()?>agile/do_upload'
            }    
        });        
    </script>
</body>
</html>






Espero que se entienda y que a alguien le sirva.
Saludos y si pueden mejorar esto bienvenido sea
__________________
la la la

Última edición por truman_truman; 24/04/2012 a las 07:36