Visualizar imagenes antes de subirlas

Citar

Escrito el 03 Ago 2007 12:07 am

hola a todos

Me podrian ayudar, resulta que quiero visualizar, las imagenes antes de subirlas a mi sitio ya hice el upload con mysql php etc, etc, he seguido el tutorial este al pie de la letra y no me muestra la imagen a visualizar alguien tiene alguna idea de en que estoy mal????? :roll:

http://www.kadazuro.com/blog/archives/000068.php

salu2

Por angel

80 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

México, D.F.

Citar

Escrito el 03 Ago 2007 01:55 pm

angel escribió:

...visualizar, las imagenes antes de subirlas...

Para eso no la tienes en la carpeta donde esta guardada en tu PC?

"Antes" de subirla no puedes hacer nada. Si no explicate mejor porque no entiendo que quieres hacer.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 03 Ago 2007 04:06 pm

Por lo que vi, ese código te hace un preview de la imágen que estas por subir desde tu PC, con lo cual concuerdo con Ramm.. se supone que la imágen ya la conoces y ya la viste desde tu Pc.. para que querrás verla de nuevo en la página?
Bueno, fuera de esto, para entender que es lo que esta haciendo mal, deberias poner el código que estas haciendo.

Por PabloHdS

251 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 03 Ago 2007 04:50 pm

hola gracias por las prontas respuestas...

Si el codigo hace un preview de la imagen que quiero cargar (bueno supuestamente), he visto varios foros con codigos similares este es el mas corto, y la logica del codigo me parece la mas correcta ni mas ni menos solo lo que necesito para previsualizar la imagen, si he cierto para que previsualizarlas si ya se cuales voy a cargar,

es como diseñar un html quiero o no quiero banner?

claro piensas en lo que seria mejor para el html deacuerdo a la distribucion de las reticulas y justificasion de los objetos bueno

, la pagina es para un amigo, y megustaria meterle esto, no se, es como querer quedar bien con él... solo lo poste, para ver si alguien habia hecho esto anterior mente. pero como dijo Ramm, "Antes" de subirla no puedes hacer nada, pues ni modo, Gracias por la ayuda y aqui esta el codigo por si alguien mas lo quiere revisar.. :wink:

o tiene alguna otra idea o sugerencia.

salu2 y gracias

Código :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Img Upload w/Preview</title>
<style type="text/css">
<!--
input {
   margin-top:10px;
   display: block;
   text-align:center;
}
form{
 text-align:center;
   width:400px;
   margin-left:auto;
   margin-right:auto;
}
-->
</style>
<script language="javascript">
  function refreshImg(){
     document.form1.picture.src = 'file:///'+ document.form1.imageField.value;
   }
</script>
</head>
<body>
  <form name="form1" id="form1" action="" method="post" enctype="multipart/form-data" >
    <img src="imagen1.jpg" id="picture" alt="vista previa" height="100" width="100"/>
    <input name="imageField" type="file" onChange="refreshImg()">
  </form>   
</body>
</html>

Por angel

80 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

México, D.F.

Citar

Escrito el 04 Ago 2007 07:34 am

angel escribió:

document.form1.picture.src = 'file:///'+ document.form1.imageField.value;

Jajaja, pues no es mala idea colocar la ruta absoluta en una etiqueta <img>, deberia funcionar.

No tiene ningún uso real, pero podría ser un buen eye-candy para los n00bs, un buen estudio de usabilidad con usuarios reales seria buena idea.

Un saludo

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 06 Ago 2007 02:33 pm

Es algo que no entiendo

porque remplazo esta linea:

Código :

document.form1.picture.src = 'file:///'+ document.form1.imageField.value;

por esta

Código :

document.form1.picture.src = 'imagen3.jpg';

y al movento del evento onChange la cambia sin problema

en donde estaria el error o si pudiera obtener al ruta del cliente de donde se obtiene la imagen junto con el nombre del archivo eso seria el resultado correcto... para asignarselo a document.form1.picture.src = document.form1.VarconlaRutadelClientemasNomArchivo;

salu2

Por angel

80 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

México, D.F.

Citar

Escrito el 07 Ago 2007 07:09 am

Mejor usa IDs en vez de forms para recoger los elementos, es mas práctico, y fácil de entender.

Basicamente tienes que jalar la ruta del input[type=file] y ponerlo en img[src], un saludo.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 08 Ago 2007 12:01 pm

El código propuesto me funciona solo en IE, en Opera no funciona (y creo saber por qué). Sin embargo no funciona directamente, hice unos cambios.

al IMG le agregé el parámetro name="picture" y en el código JavaScript la asignación se la hago a document.picture.src = ... Así funciona en IE.

Ahora bien, no funciona en Opera porque Opera agrega comillas en el path del nombre del archivo en el input correspondiente.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 08 Ago 2007 03:38 pm

enserio te funciona en IE yo Tengo el IE7 y no me funciona, tampoco me funcional en Firefox, hice algunas modificaciones para saber que me estaba mandando agregue esto....

Código :

<script language="javascript">
function refreshImg(){
   imagen1=new Image
   imagen1.src = document.form1.imageField.value;
   alert(imagen1.src); 
   document.picture.src = imagen1.value;
   //document.images['picture'].src = imagen1.src;
}
</script>
</head><body>
<img src="cupido.gif" name="picture" alt="vista previa"  height="50" width="50" />
<form name="form1" id="form1" action="" method="post" enctype="multipart/form-data" >
    <input name="imageField" type="file" onChange="refreshImg()">
</form>

y tampoco y despues volvi agregar esto...talvez quitando lo del 'file:///' solo dejando la ruta absoluta y nada....

Código :

<script language="javascript">
function refreshImg(){
   imagen1=new Image
   imagen1.src = document.form1.imageField.value;
   var rutaimg = imagen1.src;
      function str_replace(cadena, cambia_esto, por_esto) {
            return cadena.split(cambia_esto).join(por_esto);
      }
   rutaimg = str_replace(rutaimg,'file:///','');
   alert(rutaimg); 
   document.picture.src = rutaimg.src;   //rutaimg.value
   //document.images['picture'].src = imagen1.src;
}
</script>

y segui buscando otras obciones como PHP y encontre esta pagina http://www.maestrosdelweb.com/editorial/revisar-las-imagenes-antes-de-subirlas/ para previsualizar el archivo dice algo deque pasa la imagen a un iframe y por eso da la previsualizacion, no esta muy bien explicado el ejemplo pero funciona solo 'dice' que en todos los navegadores se puede previsualizar la img yo lo prove en Firefox y IE7 y si funciona alguien podria ayudarme ha hacer este ejemplo mas sencillo... ya que esta fuera de mi capacidad de entendimiento.... :shock:

http://www.caricatos.net/articulos/check_form.html

salu2

Por angel

80 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

México, D.F.

Citar

Escrito el 21 Jul 2009 08:40 pm

hola pucha he probado el codigo de la parte de arriba esta excelente pero tengo un problema
que cuando incluyo esa pagina o codigo en un php no hace nadaaaaaa alguien sabe porque sucede eso
desde ya gracias cualquier respuesta haber si me la mandan al msn es [email protected]

Por sdarknot

1 de clabLevel

Envíale un mensaje privado

Visualizar imagenes antes de subirlas

Escribe una respuesta rapida