Quiero enviar una imagen por el formulario de php con ajax, pero por alguna razón no me esta llegando el por POST el $_FILES[] pero si me llega el POST de public de la publicación y me la inserta en la base de datos de forma correcta, pero no me llega nada por el POST de la imagen.
Según los errores que muestra en la imagen que publico mas abajo, el error se debe a que en la logica de PHP que muestro al final de esta publicación, no esta llegando nada por el $_FILES[] pero quiero que sepan que si me llega el $_POST['public'] y lo guarda en la base de datos. Lo que no se si la logica del publication.js que es donde se encuentra la logica del JS para enviar el formulario a publication.php, no se si esta de forma correcta.
Formulario HTML5:
<form id="form" method="POST" class="col s12" enctype="multipart/form-data">
<div class="row">
<div class="input-field col s12">
<textarea id="post" name="post" class="materialize-textarea" required></textarea>
<label for="post">Dile algo al mundo...</label>
<span class="helper-text" data-error="wrong" data-success="right">
<div class="file-field input-field">
<span class="file-path-wrapper">
<i class="material-icons prefix">photo_camera</i>
<input id="img" name="img" type="file">
</span>
</div>
</span>
</div>
</div>
<div id="respuesta"></div>
<!-- Boton de publicar -->
<button class="btn waves-effect btn-color right" id="submit" type="button" name="public">Publicar
<i class="material-icons left">send</i>
</button>
<p id="respuesta" class="red-text"></p>
</form>
Código JS: $('#submit').click(function(){
var publicacion = document.getElementById('post').value;
var photo = document.getElementById('img').value;
// Enviar las variables a la ruta
var ruta = "public="+publicacion+"&img="+photo;
$.ajax({
url: './backend/publication.php',
type: 'POST',
data: ruta,
})
.done(function(res){
$('#respuesta').html(res)
})
.fail(function(){
console.log("error");
})
.always(function(){
console.log(publicacion);
});
});
Código PHP:
<?php session_start();
require_once('../connection/connection.php');
$email = $_SESSION['email'];
require_once('../user/user.php');
require_once('../backend/publication.php');
// Obtener direccion ip del cliente
$ip = $_SERVER['REMOTE_ADDR'];
// Obtener el navegador del visitante
$browser = $_SERVER['HTTP_USER_AGENT'];
$errors = '';
$maxSize = 2097152; // 2 MB
if(isset($_POST['public'])){
$post = $_POST['public'];
$photo = $_FILES['img'];
// Obtenemos el nombre y la extension de la img
$photoName = $photo['name'];
// Obtenemos el tipo de la img
$photoType = $photo['type'];
// Asegurarnos que la imagen contenga un formato de img
if($photoType == "image/jpg" || $photoType == "image/png" || $photoType == "image/jpeg" || $photoType == "image/git" || $photoType == "image/gif" || $photoType == ""){
// Verificar el peso de la imagen
if($photo['size'] >= $maxSize) {
$errors = 'La imagen pesa mucho, por favor solo 2MB';
}
if(!is_dir('../photo')){
mkdir('../photo', 0777);
}
// Movemos la img a la carpeta photo
move_uploaded_file($photo['tmp_name'], '../photo/'.$photoName);
}else {
echo 'El tipo de imagen no es soportado';
}
// Limpiar
$post = htmlspecialchars($post);
$post = trim($post);
$post = filter_var($post, FILTER_SANITIZE_STRING);
// Si no hay errores, guardamos la pub en la BD
if($errors == ''){
$statement = $conexion->prepare('INSERT INTO publication (id_pub, id_user_pub, messeger_pub, photo_pub, ip_pub, browser_pub, create_at_pub) VALUES(
null, :id_user, :post, :photoName, :ip, :browser, NOW())'
);
$statement->execute(array(
':id_user' => $id_user,
':post' => $post,
':photoName' => $photoName,
':ip' => $ip,
':browser' => $browser
));
}
}
data: ruta,
lo siguientecontentType: false, cache: false, processData: false,
$(document).on('submit', '#form', function() { //Obtener datos formulario
var ruta = new FormData(this); }