How to send attached file to server side with Ajax in Worldpress environment

Question

I have the folloving Ajax method which i use to send the data requested (to send a mail) to the server side. I also have to send 2 attached files to the server side. Anyone could help me how to do this? I need to do the upload in this file, i don't have any other server side php scrips, just some functions in this same file to work whit the data. This environment in only in wordlfpress not only plane ajax. The other topic does not give answere to this question.

The code fragment:

            jQuery('#carrieremailsend').click(function(){
                var career_id = jQuery('#carrierid').val();
                var careertittle = jQuery('#carriertittle').val();
                var name = jQuery('#name').val();
                var email = jQuery('#mail').val();
                var message = jQuery('#message').val(); 

                var data = {
                action: 'send_carrier_email',
                career: career_id,
                name: name,
                email: email,
                message: message
                }

Can anyone help me how to do it? Thank you!

The answhere I was looking for is the following:

var fd = new FormData();
var cv = jQuery(document).find('#cv');
var lm = jQuery(document).find('#lm');

var individual_file = cv[0].files[0];
var lm_file = lm[0].files[0];
fd.append("career",career_id);
fd.append("name",name);
fd.append("email",email);
fd.append("message",message);
fd.append("cv", individual_file);
fd.append("lm", lm_file);
fd.append('action', 'fiu_upload_file');

This code also postr other data to server side. If you want to store these attached files on your server you also have to implement the followinf PHP code on the server side (this is whit 2 seperate files):

move_uploaded_file($_FILES["cv"]["tmp_name"],WP_CONTENT_DIR .'/uploads/CV/'.basename($_FILES['cv']['name']));
move_uploaded_file($_FILES["lm"]["tmp_name"],WP_CONTENT_DIR .'/uploads/lm/'.basename($_FILES['lm']['name']));

The best way to prevent errors and misfunction on request is using **formData** javascript object to get the whole form (instead of your __data__ object) — Nacho M., Jul 19 '16 at 07:14
if I use the formData instead of data object the server side will get the exacly the same way the datas as if I use the data object? If yes how can i transfrom my object into formData one? — Stonesmit, Jul 19 '16 at 07:18
Is if OK to have a form and a dataForm in the same ajax method? — Stonesmit, Jul 19 '16 at 07:39

score 0 · Answer 1 · answered Jul 19 '16 at 08:30

Do it something like this

$(document).ready(function (e) {
    $('#your_form_id').on('submit', (function (e) {
        e.preventDefault();
        $.ajax({
            url: 'send_carrier_email',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: 'json',
            success: function (data)
            {    
                if(data.isSuccess){
                  alert("data submitted.");
                }

            }
        });
    }));
});

While on the server side

print_r($_POST);
print_r($_FILES);
// do your code here 
// .
// .
echo json_encode(array('isSuccess'=>True));
die;

How to send attached file to server side with Ajax in Worldpress environment

1 Answers1