upload with ajax and formdata displays error

Navigation
0

I'm trying to send a file to the server with ajax and php. I've tried variations with people who had doubts on the same subject but nothing works (I'm sure I'm doing some bullshit). I have a form with 4 fields, one of them is file type. I do all the validation and at the time of sending the error appears: "SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data".

In form I have already placed the "enctype=" multipart / form-data "attribute.

My script looks like this: 

$("#formAgendaConsulta1").validate({
    // Define as regras
    unkeyup: false,
    rules:{
        arqup:{
            required: true
        },
        especialidade:{
            required: true
        },
        especialista:{
            required: true
        },
        dataConsulta:{  
            required:true, 
            dateBR:true 
        },
        horaConsulta:{ 
            required:true, 
            timeBR:true 
        }
    },
    // Define as mensagens de erro para cada regra
    messages:{
        arqup:{
            required: "Você deve selecionar o arquivo"
        },
        especialidade:{
            required: "Preenchimento obrigatório"
        },
        especialista:{
            required: "Preenchimento obrigatório"
        },
        dataConsulta:{ 
            required: "Preenchimento obrigatório", dateBR: "Data inválida" 
        },
        horaConsulta:{ 
            required: "Preenchimento obrigatório", timeBR: "Horário inválido" 
        }
    },
    submitHandler: function( form ){
        //var dados = $( form ).serialize();
        //dados.append('arqup', $('input[type=file]')[0].files[0] );
        var dados = new FormData( document.querySelector('form') );         
        //formData.append('arqup', $("input[name='arqup']").prop('files')[0]);
        //formData.append('horaConsulta', $("input[name='horaConsulta']").val());
        dados.append( 'especialidade', $("#especialidade").val() );
        dados.append( 'dataConsulta', $("#dataConsulta").val() );
        dados.append( 'horaConsulta', $("#horaConsulta").val() );
        dados.append('imagem', $('input[type=file]')[0].files[0] );
        console.log( dados );
        $.ajax({
            type: "POST",
            url: $( form ).attr('action'), // "saveAgendaConsulta1.php",  
            data: dados,
            processData: false,
            contentType: false,
            dataType: "json",
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', function (s) {
                        console.log('PROGRESSO', s); 
                    }, false);
                }
                return myXhr;
            },
            success: function( data ){ // Executa a função se a requisição funcionar
                var msgFinal = data.msgFinal;
                $('#resultAgendaConsulta1').html( msgFinal );
                $('#resultAgendaConsulta1').show( 'slow' );
                // rolar a tela até o elemento
                //$('#cxAgendaConsulta1').animate({ scrollTop: $('#resultAgendaConsulta1').offset().top }, 'slow'); 
            },
            beforeSend: function(){ // Executa a função assim que a requisição for enviada
                $('#loadAgendaConsulta1').css({display:"block"});
            },
            complete: function(msg){ // Executa a função sempre que a requisição for executada
                $('#loadAgendaConsulta1').css({display:"none"});
            },
            error: function(){
                bootbox.alert("Falha de Conexão!<br />Não foi possível efetuar sua requisição.<br/>Aguarde alguns instantes e faça uma nova tentativa.");
            }
        });
        return false;
    }
});
    
asked by anonymous 09.07.2018 / 17:47

1 answer

0

Sending and receiving data in AJAX is usually done using strings and you are sending the data as object , use the JSON.stringify() function to convert the data before to send. 

// ...
$.ajax({
    type: "POST",
    url: $( form ).attr('action'), // "saveAgendaConsulta1.php",  
    data: JSON.stringify(dados),
    // ...
    });

At reception you will need to use JSON.parse() to convert the received JSON ( string ) to a JavaScript object; except if you're using jQuery and then you can do it directly with $.getJSON() .

    
09.07.2018 / 18:17
Create a file in another C directory How to use jquery validate with FormData Object