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>';
}
} 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
