jQuery AJAX - send file and variable to PHP in single request

Question

I have the following HTML form for uploading a file (picture):

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

I use the following JavaScript/jQuery to send form data and a variable value to PHP script:

var variable1= 1;

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);

    $.ajax({
                url: 'upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: {form_data, number: variable1},                         
                type: 'post',
                success: function(php_script_response){
                alert(php_script_response); // display response from the PHP script, if any
            }
    });
});

The PHP script (upload.php) looks like this:

$filename;
if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    $filename = $_FILES['file']['name'];
}
echo $filename;

When I run this code, PHP throws some undefined index errors. If I use only "data: form_data" in ajax request (without variable1), then the file uploads successfully, but I need to send the variable too. How can I do this?

Rotimi · Accepted Answer · 2017-11-23 14:27:56Z

1

You can also append the number key => value to to the form data as

form_data.append('number',  variable1);

Then in Ajax call

data: form_data,

answered Nov 23, 2017 at 14:27

Rotimi

4,7804 gold badges21 silver badges28 bronze badges

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

Comments

Paramjeet · Accepted Answer · 2017-11-23 14:26:31Z

1

why don't you append this value like this

form_data.append('number', variable1);

answered Nov 23, 2017 at 14:26

Paramjeet

3361 gold badge5 silver badges19 bronze badges

Comments

Luffy · Accepted Answer · 2017-11-23 14:27:17Z

1

Append the variable to form_data

var form_data = new FormData();                  
form_data.append('file', file_data);
form_data.append('number', variable1); // append variable

In ajax

processData: false,
data: form_data,    // data                   
type: 'post',

answered Nov 23, 2017 at 14:27

Luffy

1,0265 silver badges13 bronze badges

Comments

Manpreet Dhiman · Accepted Answer · 2020-11-17 05:01:43Z

0

I am following your code because I need FILES image data and multiple variables in PHP script for insertion operation in the database. But I am unable to access any single variable in the php script. I did below to access your number variable. Please correct me.

//upload.php
        if(isset($_GET['number'])){
             $num = $_GET['number'];
             echo $num;
    
        }else{
            echo 'not set';
        }

answered Nov 17, 2020 at 5:01

Manpreet Dhiman

1035 bronze badges

2 Comments

Manpreet Dhiman Over a year ago

Kindly help me. I am unable to access this variable in PHP script

Marin Leontenko Over a year ago

Try using $_POST instead of $_GET. I'm using POST request in example above.

Collectives™ on Stack Overflow

jQuery AJAX - send file and variable to PHP in single request

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related