PHP - subir imagen y guardar ruta en bd con ajax

   
Vista:
Imágen de perfil de Emiliano

subir imagen y guardar ruta en bd con ajax

Publicado por Emiliano (17 intervenciones) el 30/05/2015 03:19:30
Hola como están, tendrían la bondad de brindarme una explicación de lo siguiente:

Tengo una plantilla con diferentes elementos entre ellos esta un input de tipo file,

<input id="file_url" type="file" name="foto">

y por lo general para realizar un registro utilizo ajax para enviar los datos a registro.php

y para enviar la imagen no se muy bien como hacerlo, ustedes tal vez han realizado esto con ajax.

Gracias por las sugerencias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

subir imagen y guardar ruta en bd con ajax

Publicado por xve (5525 intervenciones) el 30/05/2015 20:10:13
Hola Emiliano, en mi caso, lo que hago, es enviar el formulario desde javascript, pero sin mostrar el envío, y sin actualizar la pagina web...

1
2
3
4
var action=$("#"+formId).attr("action");
$("#"+formId).attr({"target":'iframe_null', "action":file});
$("#"+formId).submit();
$("#"+formId).attr({"target":'', "action":action});

formid contiene el id del formulario.

Si te fijas, lo que hace es modificar el target del formulario, lo envío y vuelve a poner el target original.

Con esto, envías el formulario normal, pero no muestras nada en el navegador, ni se refresca la pagina.

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Emiliano

subir imagen y guardar ruta en bd con ajax

Publicado por Emiliano (17 intervenciones) el 30/05/2015 23:42:11
Hola gracias por la respuesta, fijándome en el ejemplo que amablemente me dio a conocer e investigando logre enviar la imagen pero si deseo enviar más campos de tipo string como debería hacerlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
     $(function(){
        $("input[name='file']").on("change", function(){
            var formData = new FormData($("#formulario")[0]);
            var ruta = "registro.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
        });
 
     });
    </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

subir imagen y guardar ruta en bd con ajax

Publicado por xve (5525 intervenciones) el 31/05/2015 21:26:51
Esa opción esta muy bien, pero creo recordar que no funciona con versiones anteriores a IE11.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Emiliano

subir imagen y guardar ruta en bd con ajax

Publicado por Emiliano (17 intervenciones) el 01/06/2015 00:05:09
Hola, pero tengo una duda como envió más datos de tipo string:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
     $(function(){
        $("input[name='file']").on("change", function(){
            var formData = new FormData($("#formulario")[0]);
            var ruta = "registro.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
        });
     });
</script>

Debo implementar algo más, porque únicamente se envía la imagen, los demás datos no.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar