Subir una foto al servidor. Modificación de esta y envio de 2 formularios.

[Phantasy]

Muy buenas, para empezar no he podido explicarlo mejor en el asunto, perdonen.

Tengo un formulario con distintos campos, en mitad del formulario tengo un botón para subir una foto. Cuando pulso el botón se abre un "pop-up", lo digo entre comillas porque no es una ventana, sino es un DIV con un contenido.

Dicho contenido es un INCLUDE con el formulario para subir la foto, subo la foto al servidor y entonces me deja modificarla, recortarla etc y guardarla de nuevo. Cerrar el popup y seguir con el formulario y enviarlo cuando termine.

Eso es lo que debería de suceder, pero no es así y no se me ocurre ninguna forma de arreglarlo, por eso he venido aquí. El problema es que el cuando llego a la parte de la foto, abro el popup, elijo la foto y cuando le doy a subir se recarga toda la pagina (formulario etc,) porque el botón del formulario para subir la foto es un SUBMIT, entonces pierdo todos los datos introducidos anteriormente.

No se como hacerlo para que funcione como a mi me gustaría que lo hiciese, me han dicho que lo haga con AJAX, pero he visto en otros foros que con el tema de imágenes no es muy recomendable (no se si es cierto o no), aparte no sabría hacerlo.

Gracias y un saludo.

[basickdagger]

Muy buenas, para empezar no he podido explicarlo mejor en el asunto, perdonen.

Tengo un formulario con distintos campos, en mitad del formulario tengo un botón para subir una foto. Cuando pulso el botón se abre un "pop-up", lo digo entre comillas porque no es una ventana, sino es un DIV con un contenido.

Dicho contenido es un INCLUDE con el formulario para subir la foto, subo la foto al servidor y entonces me deja modificarla, recortarla etc y guardarla de nuevo. Cerrar el popup y seguir con el formulario y enviarlo cuando termine.

Eso es lo que debería de suceder, pero no es así y no se me ocurre ninguna forma de arreglarlo, por eso he venido aquí. El problema es que el cuando llego a la parte de la foto, abro el popup, elijo la foto y cuando le doy a subir se recarga toda la pagina (formulario etc,) porque el botón del formulario para subir la foto es un SUBMIT, entonces pierdo todos los datos introducidos anteriormente.

No se como hacerlo para que funcione como a mi me gustaría que lo hiciese, me han dicho que lo haga con AJAX, pero he visto en otros foros que con el tema de imágenes no es muy recomendable (no se si es cierto o no), aparte no sabría hacerlo.

Gracias y un saludo.

pon código para q te podamos ayudar mejor... y me parece q si utilizas el input type file ese no funciona como submit...

[Phantasy]

Pondre partes del codigo, por ejemplo la parte de MySql no la tengo hecha porque no funciona de por si el formulario...:

Parte HTML:

Código [Seleccionar] Expandir


<form id="formulario_comerciante" action="" method="post">

<input type="text" id="nombre_del_comerciante" required="required" size="55" /><input type="text" id="cif_del_comerciante" required="required" size="55" />
<input type="text" id="password_comerciante" required="required" size="55" />
<input type="text" id="repetir_password_comerciante" required="required" size="55" />
<input type="text" id="nombre_de_la_empresa" required="required" size="55" />
<input type="text" id="direccion_comerciante" required="required" size="55" />
<input type="button" id="abrir_popup_foto" />
<input type="image" src="../Landing/boton_confirmar.png" name="confirmar_registro_cliente" value="CONFIRMAR" style="color:white; font-weight:bold; margin-left:700px;" required="required" />
                       
                        </form>

<div id="foto" style="display: none;">
                                            <div class="contenido-foto">
                                                <div class="cerrar_popup_foto"><a href="#" id="cerrar_popup_foto">X</a></div>
                                                <?php include("../subir imagenes/upload_crop_v1.2.php"); ?>
                                            </div>
                                        </div>



Parte JS:

Código [Seleccionar] Expandir

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#abrir_popup_foto').click(function(){
        $('#foto').fadeIn('slow');
    });

    $('#cerrar_popup_foto').click(function(){
        $('#foto').fadeOut('slow');
    });
});
</script>

Parte CSS:

Código [Seleccionar] Expandir

<style>

#foto {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}

.contenido-foto {
    margin:0px auto;
    margin-top:50px;
    padding:10px;
    width:500px;
    min-height:250px;
    border-radius:4px;
    background-color:#FFFFFF;
    box-shadow: 0 2px 5px #666666;
}

.cerrar_popup_foto {
    position:relative;
    left:480px;
}

</style>

El include que tiene el POP UP es un archivo PHP que lleva enlazado dos JS, pero es para el tema de reducir la imagen etc, los he sacado de esta pagina http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

Ya se que el formulario no tiene nada en el action, pero si ya empiezo mal con el tema del submit de la foto...

[basickdagger]

mm ya veo, se recarga la página al subir la imagen, me temo q deberás utilizar AJAX para subir la imagen y cargar tu formulario con la imagen ya cargada para editarla...o la otra te dejo un ejemplo, tal ves te funcione...

http://jqueryui.com/dialog/#modal-form

salu2

[Phantasy]

mm ya veo, se recarga la página al subir la imagen, me temo q deberás utilizar AJAX para subir la imagen y cargar tu formulario con la imagen ya cargada para editarla...o la otra te dejo un ejemplo, tal ves te funcione...

http://jqueryui.com/dialog/#modal-form

salu2

Gracias lo probaré y lo comento.