1

Tengo un Form en HTML para poder actualizar la imagen de perfil de los usuarios por una propia.

Tengo el AJAX que envía la imagen vía POST al PHP y a su vez el PHP la sube al servidor. El problema es que, si bien el form me deja elegir el archivo, al seleccionar la imagen (onchange), no envía la imagen en cuestión.

Ya intenté hacerlo también haciendo un trigger(submit) con input type submit, pero ocurre exactamente lo mismo que al usar on(change) con el input type file.

Les dejo los scripts, si alguien puede decirme qué estoy haciendo mal para así modificarlo, se lo agradezco de antemano.

Script HTML

<form enctype="multipart/form-data" class="form-img" method="POST">
<div class="row" style="margin: 0px; font-size: 18px;">
    <div class="col-md-4">
        <img width="100%" height="auto" src="fotos/<?php echo $_SESSION['logo']; ?>"><br>
    </div>
    <div class="col-md-8">
        <label style="display: block;">Seleccione una imagen de perfil:</label>
        <div hidden><input name="image" type="file"></div>
        <div class="btn-only blue upload" style="margin: 0px;">Buscar</div>
        <span class="img-status"></span>
    </div>
</div><hr>
</form>

Script AJAX (jQuery)

$(".upload").on("click", function(){
    $("[name=image]").trigger("click");
});
$("[name=image]").on("change", function(){
    $.ajax({
        url: "functions/cambiar_imagen.php",
        type: "post",
        data: $(".form-img").serialize(),
        success: function(e){
            alert(e);
        }
    });
});

Script PHP

<?php
session_start();
include("serverconfig.php");
include("codificar_clave.php");
include("log.php");

$target_path = "../fotos/";
$target_path = $target_path.basename($_FILES["image"]["name"]);
$temp_path = $_FILES["image"]["tmp_name"];

if(move_uploaded_file($temp_path, $target_path)){
    echo "El archivo ".basename($temp_path). " ha sido subido";
} else {
    echo "Ha ocurrido un error, trate de nuevo!";
}
?>

2 respuestas 2

0

Cambia data: por FormData.

quedaria algo similar a esto:

$.ajax({
        url: "functions/cambiar_imagen.php",
        type: "post",
        data: new FormData($(".form-img")[0]),
contentType: false,
        cache: false,
        processData:false,
        success: function(e){
success: function(e){
            alert(e);
        }
    });
});
11
  • La API FormData es compatible con IE10+
    – Marcos
    Commented el 24 ene. 2017 a las 17:25
  • @MarcosGallardo ¿eso existe todavia?
    – Killpe
    Commented el 24 ene. 2017 a las 17:35
  • Ya probé utilizando formData, pero de ésa manera no ejecuta el Ajax directamente. Commented el 24 ene. 2017 a las 18:02
  • Te he editado la respuesta @IgnazVolkov a mi con eso me funcionó y tampoco me pasaba nada usando formData
    – Killpe
    Commented el 24 ene. 2017 a las 18:04
  • 1
    Creo que aún así vale la pena mencionar la compatibilidad.
    – Marcos
    Commented el 24 ene. 2017 a las 18:24
0

hay amigo yo esta igual que tu esta que hize esto con mi cigigo es para subir un videos y otener una imagen lo mudifique para ti lo hice rapido si tiene un error dime y suerte con tu code :D https://drive.google.com/open?id=0B05fuDZbqNIVbmt0MW8yaEd3Zm8

 $(document).ready(function() { 

            $('#photoimg').live('change', function()            { 
                       $("#preview").html('');
                $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
            $("#imageform").ajaxForm({
                        target: '#preview'
        }).submit();

            });
        }); 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.