I've been beating since yesterday with an upload of images in AJAX. I am going to publish the advances that I had in study and the difficulties that I still have in case someone can help me:)
My script as I always did (without images) was basically the form
<form id="cadastrar-evento" method="POST" enctype="multipart/form-data">
<label>Título</label>
<input class="form-control" type="text" placeholder="Título do Evento" name="titulo">
<label>Descrição</label>
<textarea class="form-control" type="text" placeholder="Descrição do Evento" name="descricao" id="descricao-evento" maxlength="240"></textarea>
<hr>
<label>Fotos</label>
<input id="selecao-arquivo1" type="file" name="imagem1">
<input id="selecao-arquivo2" type="file" name="imagem2">
<input id="selecao-arquivo3" type="file" name="imagem3">
<input type="submit" class="btn btn-success" value="Cadastrar Evento" id="botao">
My Ajax
//Cadastrar
$('form#cadastrar-evento').submit(function(e){
e.preventDefault();
var form = $(this);
//(...) Validações
var valores = form.serialize();
$.ajax({
type : 'POST',
url : 'dados/cadastro-evento.php',
data : valores,
dataType : 'json',
success : function(data){
if(data.status == 1){
alert(data.msg);
window.location.href="index.php?pg=eventos";
}else{
alert(data.msg);
}
}
});
});
But, searching, I needed to change the serialize using the formData method and did this:
//Cadastrar
$('form#cadastrar-evento').submit(function(e){
e.preventDefault();
var form = $(this);
//(...) Validações
valores = new FormData(form);
//var valores = form.serialize();
$.ajax({
type: 'POST',
url: 'dados/cadastro-evento.php',
data: valores,
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function(data){
if(data.status == 1){
alert(data.msg);
window.location.href="index.php?pg=eventos";
}else{
alert(data.msg);
}
}
});
});
But my console displays as if formData had not defined?
InPHPIreturnajSON,butfromwhatIunderstand,Icannotusethereturninthisway.OrcanI?
if($sqlInsereEvento){$retorno=array("status" => 1, "msg" => "Evento cadastrado com sucesso!");
echo json_encode($retorno);
exit;
}else{
$retorno = array("status" => 0, "msg" => "Ocorreu algum erro ao cadastrar este evento, tente novamente.");
echo json_encode($retorno);
exit;
}
Thank you in advance if anyone can clarify these doubts.
UPDATE
Now there are no errors in JS, this is my last version:
(...)
valores = new FormData(form);
//var valores = form.serialize();
$.ajax({
type: 'POST',
url: 'dados/cadastro-evento.php',
data: {valores},
contentType: false,
cache: false,
processData:false,
dataType : 'json', //Sem o JSON não recebo retorno do PHP. Recebo Undefined.
success : function(data){
if(data.status == 1){
alert(data.msg);
window.location.href="index.php?pg=eventos";
}else{
alert(data.msg);
}
}
});
But apparently values do not arrive in my PHP . I tried to print the posts and it only returns me "hi" in the alert.
//(...)
$titulo = mysqli_real_escape_string($conn, $_POST['titulo']);
$descricao = mysqli_real_escape_string($conn, $_POST['descricao']);
//Verifica Campos Vazios caso js esteja com problemas
if(empty($titulo) || empty($descricao)){
$retorno = array("status" => 0, "msg" => "oi $titulo $descricao");
echo json_encode($retorno);
exit;
}