crear una preview

[Hans el Topo]

Saludos.
Ando desarrollando un script para subir una imágen y estoy lidiando a muerte con  implementar una preview de la image a subir.

Lo que intento es hacer el preview sin tener que refrescar el formulario entero. Es decir utilizando AJAX para subir la imagen y previsualizarla.

El problema lo tengo al subir la imagen, ya que no se si el input file genera el objeto cuando un usuario selecciona una imagen o por c**ones hay que enviar el formulario para crearla. Es decir que no se donde se encuentra el objeto a subir y si es posible :X

¿Alguien ha hecho algo parecido?

[Azielito]

Es necesario subir la imagen para que puedas trabajarla =\

No he hecho eso, pero podrias hacer la funcion de "preview()" en ajax, o sea, que mande la foto, le haces lo que tengas que hacer y entonces la muestras, esto con el evento "onBlur"

Código (html) [Seleccionar] Expandir


<input type="file" onBlur="preview();">

o tambien un boton de "vista previa" y seria lo mismo pero con un onClick

[Hans el Topo]

el tema esta en que no se lo que debo subir xD

cuando selecciona una imagen el input file crea ya el objeto o lo hace al subirlo?
el value solamente tiene la ruta

[alone-in-the-chat]

Puedes hacer que el form apunte a un iframe oculto , y que se procese dentro de ese iframe , yo tuve la misma necesidad hace poco , subir un archivo sin recargar la pagina , al final hice esto , te coloco el codigo.

Formulario

Código (html4strict) [Seleccionar] Expandir


<form method="post" enctype="multipart/form-data" action="controlUpload.cfm" target="iframeUpload" onsubmit =  "return uploadingFile()" >
<table align = "center">
<tr id = "Mytr">
<td><input type = "file" id = "FiletoUpload" name = "FiletoUpload" /></td>
<td><input type = "submit" value = "Upload File" /></td>
</tr>
<tr id = "MyTrHidden"  style = "visibiliti:hidden;display:none">
<td colspan = "2" ><span style = 'font-size:12px;font-family:Arial'>Uploading file.....</span></td>
</tr>
</table>
<iframe name="iframeUpload" width = "0%" frameborder = "0" height = "0%"></iframe>
</form>


ControlUpload.cfm

Código [Seleccionar] Expandir


<cffile action="upload"
destination="c:\temp\"
nameConflict="overwrite"
fileField="Form.FiletoUpload">

<cfset session.logoUpload = "#cffile.ServerDirectory#/#cffile.ClientFile#">


Eso te va a subir la imagen sin necesidad de recargar la pagina , ya en ese punto puedes hacer  otras operaciones para ver la imagen ya subida al servidor .


Espero te ayude en algo y disculpa que ponga el code en cfm pero es que alli lo hice X)

Saludos¡¡¡¡

[Hans el Topo]

si, ya había pensado lo del iframe y creo que es la opción más adecuada

por javascript también encontré una forma bastante enrevesada de hacerlo tomando como base un código de Coranto.


gracias por la ayuda