Pessoal eu estou tendo um problema com um algoritmo no jquery, aquela de fazer upload de arquivos com ajax sem atualizar a página.
Não sei por que quando coloco o return false;
no começo do algoritmo o submit é cancelado mas por consequência o Ajax não será executado. E se colocado o return false;
no final o Ajax funciona e o return não e acaba atualizando a página.
Form
<form id="form-add-post" method="POST" enctype="multipart/form-data">
<div class="header-form-add">
<div class="cont-head-right">
<label for="tl-post">Titulo:</label><br/>
<input id="tl-post" name="tl" onblur="$(this) != ''? $(this).css(''):null;" class="input-adm" type="text" placeholder="Como instalar alguma coisa." />
</div>
<div class="cont-head-left">
<label for="tp-post">Tipo de postagem:</label><br/>
<input id="tp-post" name="tp" onblur="$(this) != ''? $(this).css(''):null;" class="input-adm" type="text" placeholder="Notícia" />
</div>
</div>
<br/>
<br/>
<textarea id="editor"></textarea>
<script src="/scripts/addons/ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
<br/>
<label for="tags-post">Tags:</label><br/>
<input id="tags-post" name="tg" onblur="$(this) != ''? $(this).css(''):null;" type="text" class="input-adm" placeholder="Ajax,JSON,JavaScript,PHP,html,JQuery" />
<br/>
<labe for="img-post">Capa da postagem</labe><br/>
<input id="img-post" type="file" required="" name="img-post" accept="image/*" />
<div class="limt-img">
<img id="load-Imgpost" name="file" src="" alt="Load img" />
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#load-Imgpost').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#img-post").change(function() {
readURL(this);
});
</script>
</div>
<button id="btnsalvepost" type="submit">Salvar</button>
</form>
jQuery
$('#form-add-post').submit(function () {
// Captura os dados do formulário
var formulario = $(this);
// Instância o FormData passando como parâmetro o formulário
var formData = new FormData(formulario);
// Envia O FormData através da requisição AJAX
$.ajax({
url: "/sys/cp/app/add-post.php",
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (answer) {
alert(answer);
}
});
return false;
});