elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  previsualizar imagenes subidas con jquery plugin ezdz
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: previsualizar imagenes subidas con jquery plugin ezdz  (Leído 1,331 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
previsualizar imagenes subidas con jquery plugin ezdz
« en: 22 Diciembre 2015, 19:13 pm »

Hola que tal! Necesito crear un formulario que previsualice las imagenes subidas usando el plugin ezdz. El problema es que tengo varios file inputs y tengo que hacerle un loop a "preview" para pasarle la dirección de cada imagen y que muestre cada una en un file input.

Código
  1. $('input[type="file"]').ezdz({
  2.    text: 'Arrastrar imagen',
  3.    preview:'url/or/path/to/image.jpg',
  4. });

Para un solo file input serviria así, pero tengo varios y cada uno debe tener una imagen.

He creado un script php que recoge la información de las imagenes (nombre, tamaño, etc) del directorio donde están y codifica los datos en json. Con ajax recojo la info para guardarla en un objeto javascript. A partir de aquí es donde tengo dudas, porque no sé como hacerle un loop a "preview".

Este es el script del ezdz.preview:

Código
  1. // Inject a file or image in the preview
  2. $.ezdz.prototype.preview = function(path, callback) {
  3.    var settings  = this.settings,
  4.        $input    = this.$input,
  5.        $ezdz     = $input.parent('.' + settings.classes.main),
  6.        basename  = path.replace(/\\/g,'/').replace( /.*\//, ''),
  7.        formatted = settings.format(basename);
  8.  
  9.    var img = new Image();
  10.    img.src = path;
  11.  
  12.    // Is an image
  13.    img.onload = function() {
  14.        $ezdz.find('div').html($(img).fadeIn());
  15.  
  16.        if ($.isFunction(callback)) {
  17.             callback.apply(this);
  18.        }
  19.    };
  20.  
  21.    // Is not an image
  22.    img.onerror = function() {
  23.        $ezdz.find('div').html('<span>' + formatted + '</span>');
  24.  
  25.        if ($.isFunction(callback)) {
  26.             callback.apply(this);
  27.        }
  28.    };
  29.  
  30.    $ezdz.addClass(settings.classes.accept);
  31. };

Gracias!


En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: previsualizar imagenes subidas con jquery plugin ezdz
« Respuesta #1 en: 5 Enero 2016, 04:11 am »

Al final encontré tiempo para seguir trabajando en esto. Dejo la solución para el que esté interesado:

Al parecer el plugin ya trae un método para crear un preview a partir de una imagen.

Con esto se inicializa el plugin en todos los file inputs:

Código
  1. $('input[type="file"]').ezdz({text: 'Arrastrar imagen'});

Para previsualizar las imagenes, normalmente es otro formulario (uno para subirlas y otro para quitar y añadir), facilmente se comprueba usando javascript:

Código
  1. if (window.location.pathname == '/url')
  2. // o si la url es la misma y lo que cambia es el get
  3. // habrá que crear una función pasandole el nombre del get
  4. if (getUrlParameter('option') == 'img')
Código
  1. var to = 'to/',
  2.    image = 'image.jpg';
  3. $('input[type="file"]').each(function(i) {  // i is the index, if needed.
  4.    $(this).ezdz('preview', 'http://www.website.com/path/' + to + image);
  5. });
Si solo teneis 1 input quitar el each().


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
imagenes previsualizar php
PHP
chicuela66 1 1,690 Último mensaje 22 Noviembre 2006, 14:36 pm
por Thaorius
Busco plugin jQuery
Desarrollo Web
[u]nsigned 2 1,583 Último mensaje 13 Noviembre 2012, 17:47 pm
por [u]nsigned
Ayuda con plugin de Jquery
Desarrollo Web
franfis 0 1,324 Último mensaje 31 Mayo 2013, 03:47 am
por franfis
Por que se usa JQuery.fn en Plugin
Desarrollo Web
franfis 0 1,003 Último mensaje 10 Junio 2013, 16:57 pm
por franfis
Detener ejecucion de Plugin de Jquery
Desarrollo Web
nevermind2403 2 1,989 Último mensaje 26 Febrero 2014, 15:53 pm
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines