[Php-avanzado] Preview

Lun Nov 11 13:08:59 ART 2013

Fijate en esto:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=ISO-8859-1" />
 <script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
 var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('imagen').src = e.target.result;
 }
reader.readAsDataURL(input.files[0]);
}
 }
</script>
<title>New Document</title>
</head>
<body>
<input type="file" name="myImage" onchange="readURL(this);" /><BR><BR>
 <img id="imagen" src="#" alt="your image" />
</body>
</html>

En tu codigo tenias algunos problemas. Primero, la linea
$('#blah').attr('src',
e.target.result); intenta utilizar la función $, que no es nativa de
javascript, y generalmente la definen los frameworks. En particular, esta
función es de jQuery o alguno compatible, por la forma en que se escribe el
selector y se utiliza el método attr. También, el elemento que se intenta
encontrar es #blah, es decir un elemento con id="blah". En tu documento
faltaba ese elemento.

Por esto no te funcionaba el codio comentado.

Con respecto al código no comentado, hay muchos errores de concepto.

 var n_foto=input.value;
Por motivos de seguridad,no se permite a los navegadores hacer disclosure
de ningún tipo de información del usuario no autorizada, eso incluye las
rutas a los archivos, por eso, esto en general devuelve un path falso, por
ejemplo (y en mi caso) "C:\fakepath\6460_1135525481509_1223690_n.jpg". Esto
evita que puedas tener cualquier tipo de acceso al archivo local, salvo por
mecanismos autorizados por el browser (FileApi, en este caso).

  var cont=document.getElementById("imagen");
Acá estas buscando por id el contenedor img, esto es correcto.

  cont.readAsDataURL(n_foto);
Acá hay un error de concepto. readDataAsURL es una función de una instancia
de FileReader, que no tiene nada que ver con un elemento HTML IMG; además,
el parámetro que toma es un objeto de información de un input tipo file. Es
más, por seguridad, también verifica que ese objeto de información sea
creado directamente por el navegador al seleccionar un archivo.

Ahora, fijate en lo que hace el código que estaba comentado:

var reader = new FileReader(); // Acá crea una instancia de FileReader,
esta le va a permitir leer el archivo

// A la instancia le define un manejador de eventos, para el evento load,
es decir, que haga algo cuando se termine de cargar el archivo.
// Ese "algo" es poner la imagen en el elemento IMG
reader.onload = function (e) {
// Buscamos el elemento con id="imagen"
 document.getElementById('imagen').src = e.target.result;
}

// Acá le decimos al FileReader que lea el archivo y lo codifique para
poder ponerlo en el src de un img (DataUrl)
reader.readAsDataURL(input.files[0]);

Cualquier duda consultá.

Saludos!

El 11 de noviembre de 2013 12:52, Leonardo Tadei - Pegasus Tech Supply <
leonardot en pegasusnet.com.ar> escribió:

> Fijate en los enlaces que te mandó Matías,
> La única forma viable de hacer esto es con la FileAPI de JavaScript
>
>
>
> El lun, 11-11-2013 a las 12:32 -0300, Daniel Billia escribió:
> > Hola Leo la imagen se hace el preview antes de cargarla como una
> > referencia en ves de tener el nombre de la imagen sino verla es como
> > decías en una de las clases si el operador se va por un momento y
> > cunado viene no sabe por que punto esta de esa manera se ve el detalle
> > del articulo con su imagen, ya probé el readAsDataUrl y no carga nada
> > no se si se esta colocando mal el path en algunos ejemplos se colocaba
> > al principio file://+el path de la foto probé de varias formas pero
> > nada,te mando unosss de los ejemplos
> >
> > <HTML>
> > <HEAD>
> > <meta
> > http-equiv="Content-Type"content="text/html;charset=ISO-8859-1" />
> >
> > <script type="text/javascript">
> > <script language="javascript" type="text/javascript">
> > function readURL(input)
> >
> > {
> >  var n_foto=input.value;
> >   alert(n_foto);
> >
> >   var cont=document.getElementById("imagen");
> >   cont.readAsDataURL(n_foto);
> >   //cont.src=n_foto;
> >
> > // este es el ejemplo original
> >
> >
> > /*
> >     if (input.files && input.files[0])
> >     {
> >         var reader = new FileReader();
> >
> >         reader.onload = function (e) {
> >             $('#blah').attr('src', e.target.result);
> >         }
> >
> >         reader.readAsDataURL(input.files[0]);
> >     }
> > */
> >
> >
> >
> >
> > }
> >
> > </script>
> >
> >
> >  <TITLE>New Document</TITLE>
> > </HEAD>
> > <BODY>
> >
> >     <input type="file" name="myImage" onchange="readURL(this);" />
> > <BR> <BR>
> > <img id="imagen" src="#" alt="your image" />
> > </BODY>
> > </HTML>
> > _______________________________________________
> > Lista de correo: Php-avanzado
> > Mensajes a la lista: Php-avanzado en pato2.fi.mdp.edu.ar
> > Administración Web:
> http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado
> > Desubscripción:
> php-avanzado-request en pato2.fi.mdp.edu.ar?subject=unsubscribe
>
> --
> Leonardo Tadei
> leonardot en pegasusnet.com.ar
> Web: http://leonardo.tadei.com.ar
> Firma pública: http://www.pegasusnet.com.ar/LeonardoTadei-public.key
>
> _______________________________________________
> Lista de correo: Php-avanzado
> Mensajes a la lista: Php-avanzado en pato2.fi.mdp.edu.ar
> Administración Web:
> http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado
> Desubscripción:
> php-avanzado-request en pato2.fi.mdp.edu.ar?subject=unsubscribe
>

-- 
Matias Fernando Gea
matigea en gmail.com
http://www.mfgea.com.ar
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://www3.fi.mdp.edu.ar/pipermail/php-avanzado/attachments/20131111/0d069d08/attachment-0001.html>