Uploading files and inputs of any type submitted with ajax

Navigation
0

People I need help for the first time I can not put something into practice. I need to make a form containing <textarea> and inputs type text, number and crucially of type file be submitted to the server through AJAX. But I can not send pure AJAX. Also try with jquery.form.js but it returns nothing. I think I did not understand how it works. I found other functions as well but they only submit files I could not modify by understanding little of JQuery

The form would be of this type: 

                    <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>


                        <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"/>

                        </div>
                        <button id="btnsalvepost" type="submit">Salvar</button>
                    </form>
    
asked by anonymous 04.01.2017 / 01:36

1 answer

1

Just grab the submit event from the form and send it via the 'serialize ()' method, for example ... 

<script>
        $(document).ready(function(){


                $( "#form-add-post" ).submit(function( event ) {
                 event.preventDefault();



                 var data = $("#form-add-post").serialize();

                    $.ajax({
                        type : "POST", // Método de envio
                        url  : "controller/suaPagina.php", // Aqui você trata os dados enviados e da um callback com Json
                        data : data, // Variavel acima
                        dataType: "json",
                        success : function(response){
                            if (response.codigo == 1) {
                                alert(response.mensagem);
                            }
                            if (response.codigo == 0) {
                                alert(response.mensagem);
                            }
                        }
                    })
                })

            })
    </script>

On the server 

    <?php
        // Aqui você pega os dados do seu form exemplo

        $titulo = (isset($_POST['tl'])) ? $_POST['tl'] : '';

        // resposta com Json

        if ($titulo == '') {
            $retorno = array('codigo' => 1, "mensagem" => "Erro ao receber dado");
            echo json_encode($retorno);
            exit();
        }
        else{
            $retorno = array('codigo' => 0, "mensagem" => "Dado recebido com sucesso");
            echo json_encode($retorno);
            exit();
        }
    ?>
    
04.01.2017 / 01:52
Insert decimal variable in firebird Text with 2 different alignments