en este momento me encuentro tratando de subir una foto con a x carpeta pero no se ejecuta el guardado de la foto, ya que cuando pulso el botón se envía es la página completa y no se hace el proceso sin recargar la pagina, a continuación dejo los códigos que tengo en el localhost. html
<form name="frmSubir" id="frmSubir" method="post" enctype="multipart/form-data">
<input type="file" name="foto" class="profile-image-upload hidden"/>
<div style="color:#999;">click en la foto para cambiarla</div>
<input type="submit" class="btn_enviar" value="Guardar Foto" />
</form>
<div id="cargado"></div>
el js
$(document).ready(function(){
$('.btn_enviar').on("click", function(evt){
evt.preventDefault();
// declaro la variable formData e instancio el objeto nativo de javascript new FormData
var formData = new FormData(document.getElementById("frmSubir"));
// declaro la variable ruta
var ruta = 'peticion/guardar-foto.php';
// iniciar el ajax
$.ajax({
url: ruta,
// el metodo para enviar los datos es POST
type: "POST",
// colocamos la variable formData para el envio de la imagen
data: formData,
contentType: false,
processData: false,
beforeSend: function(){
$('#cargado').prepend('<i class="fa fa-refresh fa-spin"></i> subiendo foto...');
},
success: function(data){
$('#cargado').fadeIn("slow",function(){
$('#cargado').html(data);
});
}
});
});
});
y el php
<?php
if(isset($_FILES["foto"]))
{
$file = $_FILES["foto"];
$nombre = $file["name"];
$tipo = $file["type"];
$ruta_provisional = $file["tmp_name"];
$size = $file["size"];
$dimensiones = getimagesize($ruta_provisional);
$width = $dimensiones[0];
$height = $dimensiones[1];
$carpeta = "img/foto/";
if($tipo != 'image/jpg' && $tipo !='image/jpeg' && $tipo !='image/png' && $tipo !='image/gif')
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error: el archivo no es una imagen.</h3>';}
else if ($size > 1024*1024)
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error: el tamaño máximo es de una 1Mb.</h3>';}
else if ($width > 500 || $height > 500)
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error la anchura y la altura maxima permitida es 500px</h3>';}
else if($width < 100 || $height < 100)
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error la anchura y la altura mínima permitida es 100px</h3>';}
else
{
$src=$_SERVER['DOCUMENT_ROOT'].'/'.$carpeta.$nombre;
move_uploaded_file($ruta_provisional, $src);
echo '<h3 class="alert alert-success" role="alert"><i class="fa fa-check"></i> Se actualizó tu foto de perfil.</h3>';
//echoecho '<meta http-equiv="refresh" content="1" />';
}
}
?>
el documen root ya se que no va ahí jajaja ese si lo saco después ya que lo tenía de prueba en el localhost, gracias por su ayuda uso el jquery 3.2.1