<div dir="ltr">Fijate en esto:<div><br></div><div><div><!DOCTYPE html></div><div><html></div><div><head></div><div><span class="" style="white-space:pre"> </span><meta http-equiv="Content-Type"content="text/html;charset=ISO-8859-1" /></div>
<div><span class="" style="white-space:pre"> </span><script type="text/javascript"></div><div><span class="" style="white-space:pre"> </span>function readURL(input) {</div><div><span class="" style="white-space:pre"> </span>if (input.files && input.files[0]) {</div>
<div><span class="" style="white-space:pre"> </span>var reader = new FileReader();</div><div><span class="" style="white-space:pre"> </span>reader.onload = function (e) {</div><div><span class="" style="white-space:pre"> </span>document.getElementById('imagen').src = e.target.result;</div>
<div><span class="" style="white-space:pre"> </span>}</div><div><span class="" style="white-space:pre"> </span>reader.readAsDataURL(input.files[0]);</div><div><span class="" style="white-space:pre"> </span>}</div>
<div><span class="" style="white-space:pre"> </span>}</div><div><span class="" style="white-space:pre"> </span></script></div><div><span class="" style="white-space:pre"> </span><title>New Document</title></div>
<div></head></div><div><body></div><div><span class="" style="white-space:pre"> </span><input type="file" name="myImage" onchange="readURL(this);" /><BR><BR></div>
<div><span class="" style="white-space:pre"> </span><img id="imagen" src="#" alt="your image" /></div><div></body></div><div></html></div></div><div><br></div><div>En tu codigo tenias algunos problemas. Primero, la linea <span style="font-family:arial,sans-serif;font-size:13px"> </span><span style="font-family:arial,sans-serif;font-size:13px">$('#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". E</span><span style="font-family:arial,sans-serif;font-size:13px">n tu documento faltaba ese elemento.</span></div>
<div><span style="font-family:arial,sans-serif;font-size:13px"><br></span></div><div><span style="font-family:arial,sans-serif;font-size:13px">Por esto no te funcionaba el codio comentado.</span></div><div><span style="font-family:arial,sans-serif;font-size:13px"><br>
</span></div><div><span style="font-family:arial,sans-serif;font-size:13px">Con respecto al código no comentado, hay muchos errores de concepto.</span></div><div><span style="font-family:arial,sans-serif;font-size:13px"><br>
</span></div><div><span style="font-family:arial,sans-serif;font-size:13px"> var n_foto=input.value;</span></div><div>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).<br>
</div><div><br></div><div><span style="font-size:13px;font-family:arial,sans-serif"> var cont=document.getElementById("</span><span style="font-size:13px;font-family:arial,sans-serif">imagen");</span></div><div>
<font face="arial, sans-serif">Acá estas buscando por id el contenedor img, esto es correcto.</font></div><div><font face="arial, sans-serif"><br></font><span style="font-family:arial,sans-serif;font-size:13px"> cont.readAsDataURL(n_foto);</span><br style="font-family:arial,sans-serif;font-size:13px">
</div><div>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.</div>
<div><br></div><div>Ahora, fijate en lo que hace el código que estaba comentado:</div><div><span style="font-family:arial,sans-serif;font-size:13px"><div><br></div><div>var reader = new FileReader(); // Acá crea una instancia de FileReader, esta le va a permitir leer el archivo</div>
<div><br></div><div>// 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.</div><div>// Ese "algo" es poner la imagen en el elemento IMG</div>
<div>reader.onload = function (e) {</div></span><div style="font-family:arial,sans-serif;font-size:13px"><span class="" style="white-space:pre"> </span>// Buscamos el elemento con id="imagen"</div><div style="font-family:arial,sans-serif;font-size:13px">
<span class="" style="white-space:pre"> </span>document.getElementById('imagen').src = e.target.result;</div><span style="font-family:arial,sans-serif;font-size:13px"><div>}<br></div><div><br></div><div>// Acá le decimos al FileReader que lea el archivo y lo codifique para poder ponerlo en el src de un img (DataUrl)</div>
<div>reader.readAsDataURL(input.files[0]);</div></span></div><div><span style="font-family:arial,sans-serif;font-size:13px"><br></span></div><div><span style="font-family:arial,sans-serif;font-size:13px">Cualquier duda consultá.</span></div>
<div><span style="font-family:arial,sans-serif;font-size:13px"><br></span></div><div><span style="font-family:arial,sans-serif;font-size:13px">Saludos!</span></div><div><span style="font-family:arial,sans-serif;font-size:13px"><br>
</span></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">El 11 de noviembre de 2013 12:52, Leonardo Tadei - Pegasus Tech Supply <span dir="ltr"><<a href="mailto:leonardot@pegasusnet.com.ar" target="_blank">leonardot@pegasusnet.com.ar</a>></span> escribió:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Fijate en los enlaces que te mandó Matías,<br>
La única forma viable de hacer esto es con la FileAPI de JavaScript<br>
<br>
<br>
<br>
El lun, 11-11-2013 a las 12:32 -0300, Daniel Billia escribió:<br>
<div><div class="h5">> Hola Leo la imagen se hace el preview antes de cargarla como una<br>
> referencia en ves de tener el nombre de la imagen sino verla es como<br>
> decías en una de las clases si el operador se va por un momento y<br>
> cunado viene no sabe por que punto esta de esa manera se ve el detalle<br>
> del articulo con su imagen, ya probé el readAsDataUrl y no carga nada<br>
> no se si se esta colocando mal el path en algunos ejemplos se colocaba<br>
> al principio file://+el path de la foto probé de varias formas pero<br>
> nada,te mando unosss de los ejemplos<br>
><br>
> <HTML><br>
> <HEAD><br>
> <meta<br>
> http-equiv="Content-Type"content="text/html;charset=ISO-8859-1" /><br>
><br>
> <script type="text/javascript"><br>
> <script language="javascript" type="text/javascript"><br>
> function readURL(input)<br>
><br>
> {<br>
> var n_foto=input.value;<br>
> alert(n_foto);<br>
><br>
> var cont=document.getElementById("imagen");<br>
> cont.readAsDataURL(n_foto);<br>
> //cont.src=n_foto;<br>
><br>
> // este es el ejemplo original<br>
><br>
><br>
> /*<br>
> if (input.files && input.files[0])<br>
> {<br>
> var reader = new FileReader();<br>
><br>
> reader.onload = function (e) {<br>
> $('#blah').attr('src', e.target.result);<br>
> }<br>
><br>
> reader.readAsDataURL(input.files[0]);<br>
> }<br>
> */<br>
><br>
><br>
><br>
><br>
> }<br>
><br>
> </script><br>
><br>
><br>
> <TITLE>New Document</TITLE><br>
> </HEAD><br>
> <BODY><br>
><br>
> <input type="file" name="myImage" onchange="readURL(this);" /><br>
> <BR> <BR><br>
> <img id="imagen" src="#" alt="your image" /><br>
> </BODY><br>
> </HTML><br>
</div></div>> _______________________________________________<br>
> Lista de correo: Php-avanzado<br>
> Mensajes a la lista: <a href="mailto:Php-avanzado@pato2.fi.mdp.edu.ar">Php-avanzado@pato2.fi.mdp.edu.ar</a><br>
> Administración Web: <a href="http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado" target="_blank">http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado</a><br>
> Desubscripción: <a href="http://php-avanzado-request@pato2.fi.mdp.edu.ar?subject=unsubscribe" target="_blank">php-avanzado-request@pato2.fi.mdp.edu.ar?subject=unsubscribe</a><br>
<span class="HOEnZb"><font color="#888888"><br>
--<br>
Leonardo Tadei<br>
<a href="mailto:leonardot@pegasusnet.com.ar">leonardot@pegasusnet.com.ar</a><br>
Web: <a href="http://leonardo.tadei.com.ar" target="_blank">http://leonardo.tadei.com.ar</a><br>
Firma pública: <a href="http://www.pegasusnet.com.ar/LeonardoTadei-public.key" target="_blank">http://www.pegasusnet.com.ar/LeonardoTadei-public.key</a><br>
<br>
_______________________________________________<br>
Lista de correo: Php-avanzado<br>
Mensajes a la lista: <a href="mailto:Php-avanzado@pato2.fi.mdp.edu.ar">Php-avanzado@pato2.fi.mdp.edu.ar</a><br>
Administración Web: <a href="http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado" target="_blank">http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado</a><br>
Desubscripción: <a href="http://php-avanzado-request@pato2.fi.mdp.edu.ar?subject=unsubscribe" target="_blank">php-avanzado-request@pato2.fi.mdp.edu.ar?subject=unsubscribe</a><br>
</font></span></blockquote></div><br><br clear="all"><div><br></div>-- <br>Matias Fernando Gea<br><a href="mailto:matigea@gmail.com" target="_blank">matigea@gmail.com</a><br><a href="http://www.mfgea.com.ar" target="_blank">http://www.mfgea.com.ar</a>
</div>