5

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;
});

2 Respostas 2

6

Remova o return false e coloque preventDefault para evitar que a página atualize:

$('#form-add-post').submit(function (evento) {
  evento.preventDefault();
  // corpo
});
2

Você pode mudar o tipo do button para 'button' e colocar o evento jquery no click do button

 <button id="btnsalvepost" type="button">Salvar</button>

e

$("#btnsalvepost").click(function(){
   ....
})
1
  • 5
    Se o camarada pressionar enter em vez de clicar no botão, o que acontece?
    – KaduAmaral
    Commented 3/01/2017 às 19:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .