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

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.
– Nacho M., Commented Jul 19, 2016 at 7: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
– Stonesmit, Commented Jul 19, 2016 at 7:18
Is if OK to have a form and a dataForm in the same ajax method? — Stonesmit
– Stonesmit, Commented Jul 19, 2016 at 7:39

Vipul sharma · Accepted Answer · 2016-07-19 08:30:35Z

0

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;

answered Jul 19, 2016 at 8:30

Vipul sharma

1,2551 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related