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?
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"
<input type="file" onBlur="preview();">
o tambien un boton de "vista previa" y seria lo mismo pero con un onClick
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
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
<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
<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¡¡¡¡
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 ;D