Upload files and inputs of any type submitted with ajax

Question

Guys I need help for the first time I’m not managing to put something into practice. I need to get a form that contains <textarea> and inputs like text,number and crucially the file type are submitted to the server through AJAX. But I cannot send by pure AJAX. Try also with jquery.form.js but it returns nothing. I think I don’t understand how it works. I found other functions too but they submit only files I could not modify because I understand little of Jquery

The form would be that kind:

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

Answer 1

Just take the Ubmit event from the form and send it through the 'serialize()' method, 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();
        }
    ?>