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;
}
});
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 php 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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP