Send input file by Ajax

Asked

Viewed 651 times

0

How do I send a file by email using Ajax? When I fill out the form, all data is sent minus the upload. By Php I can send everything right, the problem is when I run the ajax function, it does not send the upload

$("#enviar").click(function() {
  var settings = {
    // "async": true,
    // "crossDomain": true,
    "url": "curriculo.php",
    "method": "POST",
    enctype: 'multipart/form-data',
    "headers": {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    "data": {
      "nome_completo": $("#nome_completo").val(),
      "email_principal": $("#email_principal").val(),
      "email_secundario": $("#email_secundario").val(),
      "cpf": $("#cpf").val(),
      "data_nascimento": $("#data_nascimento").val(),
      "telefone": $("#telefone").val(),
      "celular": $("#celular").val(),
      "estado_civil": $("#estado_civil").val(),
      "sexo": $("#sexo").val(),
      "senioridade": $("#senioridade").val(),
      "cep": $("#cep").val(),
      "logradouro": $("#logradouro").val(),
      "numero": $("#numero").val(),
      "bairro": $("#bairro").val(),
      "complemento": $("#complemento").val(),
      "formacao_academica_curso": $("#formacao_academica_curso").val(),
      "formacao_academica_instituicao": $("#formacao_academica_instituicao").val(),
      "formacao_academica_data_inicio": $("#formacao_academica_data_inicio").val(),
      "formacao_academica_data_fim": $("#formacao_academica_data_fim").val(),
      "formacao_academica_data_fim": $("#formacao_academica_data_fim").val(),
      "formacao_academica_curso2": $("#formacao_academica_curso2").val(),
      "formacao_academica_instituicao2": $("#formacao_academica_instituicao2").val(),
      "formacao_academica_data_inicio2": $("#formacao_academica_data_inicio2").val(),
      "formacao_academica_data_fim2": $("#formacao_academica_data_fim2").val(),
      "idioma_nivel": $("#idioma_nivel").val(),
      "idioma_nome": $("#idioma_nome").val(),
      "idioma_nome2": $("#idioma_nome2").val(),
      "idioma_nivel2": $("#idioma_nivel2").val(),
      "experiencia_profissional_cargo": $("#experiencia_profissional_cargo").val(),
      "experiencia_profissional_empresa": $("#experiencia_profissional_empresa").val(),
      "experiencia_profissional_data_inicio": $("#experiencia_profissional_data_inicio").val(),
      "experiencia_profissional_data_fim": $("#experiencia_profissional_data_fim").val(),
      "experiencia_profissional_descricao_atividades": $("#experiencia_profissional_descricao_atividades").val(),
      "experiencia_profissional_cargo2": $("#experiencia_profissional_cargo2").val(),
      "experiencia_profissional_empresa2": $("#experiencia_profissional_empresa2").val(),
      "experiencia_profissional_data_inicio2": $("#experiencia_profissional_data_inicio2").val(),
      "experiencia_profissional_data_fim2": $("#experiencia_profissional_data_fim2").val(),
      "experiencia_profissional_descricao_atividades2": $("#experiencia_profissional_descricao_atividades2").val(),
      "experiencia_profissional_cargo3": $("#experiencia_profissional_cargo3").val(),
      "experiencia_profissional_empresa3": $("#experiencia_profissional_empresa3").val(),
      "experiencia_profissional_data_inicio3": $("#experiencia_profissional_data_inicio3").val(),
      "experiencia_profissional_data_fim3": $("#experiencia_profissional_data_fim3").val(),
      "experiencia_profissional_descricao_atividades3": $("#experiencia_profissional_descricao_atividades3").val(),
      "skype_gtalk": $("#skype_gtalk").val(),
      "linkedin": $("#linkedin").val(),
      "facebook": $("#facebook").val(),
      "youtube": $("#youtube").val(),
      "image1": $("#image1").val()
    }
  };

  $.ajax(settings).done(function(response) {
    console.log(response);
  });
});
<form id="msform" method="post" action="send.php" enctype="multipart/form-data">
  <div class="row">
    <div class="col-md-12">
      <div class="browse-wrap">
        <div class="title">Anexar Currículo</div>
        <input type="file" id="image1" name="image1" class="upload" title="Anexar Currículo">
      </div>
      <span class="upload-path"></span>
    </div>
  </div>
</form>

  • I didn’t understand very well, sorry, I don’t know much about ajax... where exactly this information would be in the code?

  • Can you post a complete and verifiable example? With the code posted can’t reproduce the problem.

1 answer

0

Missing the object formData

$("#enviar").click(function() {
var imagem = new FormData($('.upload')); 
..........
..........

and at the date

"data": {
  "nome_completo": $("#nome_completo").val(),
  ............
  ............
  "image1":imagem

We cannot capture the image to send with the ajax request with $("#image1").val()

  • Adapting the way you went, it didn’t work, now it’s not even getting the other form data

Browser other questions tagged

You are not signed in. Login or sign up in order to post.