Notice: Undefined index: $_FILES

Question

I am trying to send the data of a form to use in php, I made a script in ajax to send the data, I can access the POST data normally, the problem is that I cannot access the image that is in the form even putting enctype="Multipart/form-data" in the form.

ajax script

<script>
    $(function(){
        var url = 'Chamadas/adicionarAnuncio.php';
        function carregando()
        {
            //$('.loadCadastro').fadeIn('slow');
        }
        $('#formCriarAnuncio').submit(function(){               
            var dados = $(this).serialize();
            $.ajax({
                url:url,
                type: 'POST',
                data: dados,
                beforeSend: carregando,
                success: function(retorno)
                {               
                    if(retorno==1) 
                    { 
                        $('.anuncioFalha').html("");
                    }
                    else if (retorno==2)
                    {
                        $('.anuncioFalha').html("");
                    }
                    else 
                    {   
                        alert("Anuncio registrado com sucesso!");
                        window.location.href ="meusanuncios.php";
                    }
                }
            });
            return false;
        });
    });
 </script>

form

<form enctype="multipart/form-data" name="formCriarAnuncio" method="post" id="formCriarAnuncio">
    <div class="input-field col s12">
        <i class="mdi-communication-email prefix"></i>
        <input id="email" type="email" name="email" maxlength=100 class="validate"/>
        <label for="email">Email</label>
    </div>
    <div class="input-field col s5">
        <i class='material-icons prefix'>call</i>
        <input id="telefoneddd" type="tel" name="telefoneddd" maxlength=4 class="validate"/>
        <label for="telefoneddd">DDD</label>
    </div>
    <div class="input-field col s7">
        <input id="telefone" type="tel" name="telefone" maxlength=9 class="validate"/>
        <label for="telefone">Telefone</label>
    </div>
    <div class="input-field col s12">
        <i class="mdi-action-subject prefix"></i>
        <textarea id="infoadicional" type="text" name="infoadicional" maxlength=1000 class="materialize-textarea validate"></textarea>
        <label for="infoadicional"></label>
    </div>
    <img id="img" src="#">
    <input type="file" id="imagem" name="imagem" onchange="readURL(this,'mini_foto_new');"><br><br>
    <input type="hidden" id="x" name="x" /><!--referente a posição do mouse-->
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" /><!-- referente a altura e largura da imagem-->
    <input type="hidden" id="h" name="h" />
</form>

Answer 1

To send files multipart with Ajax you need to use the FormData. I edited your script with an example of how to do it.

<script>
    $(function(){
        var url = 'Chamadas/adicionarAnuncio.php';
        function carregando()
        {
            //$('.loadCadastro').fadeIn('slow');
        }
        $('#formCriarAnuncio').submit(function(){               
            var dados = new FormData($(this));
            $.ajax({
                url:url,
                type: 'POST',
                data: dados,
                beforeSend: carregando,
                success: function(retorno)
                {               
                    if(retorno==1) 
                    { 
                        $('.anuncioFalha').html("");
                    }
                    else if (retorno==2)
                    {
                        $('.anuncioFalha').html("");
                    }
                    else 
                    {   
                        alert("Anuncio registrado com sucesso!");
                        window.location.href ="meusanuncios.php";
                    }
                }
            });
            return false;
        });
    });
 </script>