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!";
}
?>