Recover Input File to Pass as Date in AJAX

Asked

Viewed 534 times

1

I am developing an application in which, for aesthetic reasons I needed to recreate some elements to be able to properly customize each especially <select> and <option>.

So I need to pass the form capturing the date manually. For this, I am using:

  $('#criarConta').click(function(){
    $.ajax({
    url: "empregador.php",
    type: "POST",
    data: {
      nome:       $('#nomeSign').val(),
      email:      $('#emailSign').val(),
      senha:      $('#passSign').val(),
      local:      $('#localInput').val(),
      site:       $('#siteInput').val(),
      tipo:       $('#tipoPerfil').data('selected'),
      ramo:       $('ramoInput').data('selected'),
      profilepic: $('profilePicInput').val()
    },
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
      console.log(data);
    }
    });
  });

I put this profilepic there to see where I intend to call the image. As far as I know, the .val() will only recover the file path, not it itself.

How to solve my case?

javascript jquery ajax

  • You need to create a formdata to upload the image, take a look at this stack https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery

  • You want to send a server arquivo/file?

  • @Luizpillon And can I create a form data without the presence of a form? What would it look like in my example (manually adding)?

  • @Marconi I want to post the image along with the rest of the elements. I validate the image sent in my PHP later.

  • 1

    let form = new FormData(); form.append("campo", $('#input').val()); form.append("file", $("input2").prop('files')[0]);

  • @Valdeirpsr put an answer :)

  • @Valdeirpsr worked perfectly! Plus let me validate the checkbox more easily! Thank you very much.

Show 2 more comments

1 answer

3


To send an image, you can use the Formdata. This is an API to store values that will be sent via POST.

When you use this API, you are basically using the enctype: multipart/form-data

But it is necessary to know another point, this time with the jQuery.ajax. By default the jquery transforms the value of data for application/x-www-form-urlencoded, then you will have to inform that nay want to use this pattern.

When you are not working with file uploading, cool, there are no problems, but in case of uplaods it is necessary to add this information: processData:false,

Now let’s talk about input. How to capture the file and not the fake path?

Unlike the input:text, for example, the input:file there is one more attribute. The attribute file is responsible for storing in an array, all objects type files File within a Filelist.

That object - file - nothing more than a Blob (raw file) and it will be sent to the server.

In the case of images, you can use this object to display a thumbnail or even capture the image using Ctrl+V

$('#criarConta').click(function(){     
    let form = new FormData();
    form.append("nome", $("#nome").val());
    form.append("file", $('#imagem').prop('files')[0]);

    $.ajax({
        url: "index3.php",
        type: "POST",
        data: form,
        cache : false,
        processData: false
    });
});

Ah, and the value, in the input:file displays only one C:\fakepath to prevent you from having access to the user’s folder structure.

Browser other questions tagged javascript jquery ajax

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