TransWikia.com

upload com ajax e formdata exibe erro

Stack Overflow em Português Asked on November 27, 2021

Estou tentando enviar um arquivo para o servidor com ajax e php. Já tentei variações com o pessoal que tinha dúvida no mesmo assunto mas nada dá certo (tenho certeza que estou fazendo alguma besteira). Eu tenho um form com 4 campos, sendo um deles do tipo file. Faço toda a validação e na hora de enviar aparece o erro: “SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data”.

No form já coloquei o atributo “enctype=”multipart/form-data”.

Meu script está assim:

$("#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;
    }
});

2 Answers

Substitua o trecho submitHandler: function( form ) { ... } por

submitHandler: function( form ) {

    // cria um objeto com os respectivos valores (ao efetuar as solicitações, será convertido)
    // "especialidade=valor&dataConsulta=###[...]""
    let obterDados = {
        "especialidade": $("#especialidade").val(),
        "dataConsulta": $("#dataConsulta").val(),
        "horaConsulta": $("#horaConsulta").val(),
        "imagem": $("input[type=file]")[0].files[0]
    };

    const frmData = new FormData();

    for (let key in obterDados)
        Array.isArray(obterDados[key])
            ? obterDados[key].forEach(value => frmData.append(`${key}[]`, value))
            : frmData.append(key, obterDados[key]); 
}

e em $.ajax({ ... }) altere o data: dados por data: frmData

$.ajax({
    type: "POST",
    url: $(form).attr("action"),
    data: frmData, // todo conteúdo armazenado no FormData() inicialmente..
    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;
    },
})

...

Desta forma poderá enviar Textos e Arquivos e o receptor de dados sendo o poderá utilizar a variável $_POST["chave-que-deseja"] e a função move_uploaded_file() para receber os respectivos arquivos submitados no formulário.

Answered by gleisin-dev on November 27, 2021

O envio e recepção de dados em AJAX é geralmente feito utilizando strings e você está enviando os dados como object, utilize a função JSON.stringify() para converter os dados antes de fazer o envio.

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

Na recepção você precisará usar a JSON.parse() para conversão do JSON recebido (string) para um objeto do JavaScript; exceto se você estiver usando jQuery e aí é possível fazê-lo diretamente com $.getJSON().

Answered by Giovanni Nunes on November 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP