Waseem Abbas February 2016

How to upload files in a form via AJAX and PHP?

Here is what I have tried so far and it isn't working. The HTML file contains:-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form Generator | Upload Driver Specification Sheet</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type='text/javascript'>
            function submit_form() {

                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: 'last_file_action.php',
                    type: 'POST',
                    data: formData,
                    async: false,
                    success: function (data) {
                        $('#results').html(data);
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });

                return false;
            }
        </script>
    </head>
    <body class="gray-bg3_full">
        <form class="m-t" role="form" id='data'  method="post" enctype="multipart/form-data">
            <input type="hidden" name="MAX_FILE_SIZE" value="2000000">

            <div class="form-group">
                <p id='new_project_text'>Please include your Product spec sheet: </p>
                <input class="btn btn-primary-save btn-block" type="file" name="userfile" /> <i class="fa fa-upload"></i> &nbsp;  <br/>
            </div>
            <button type= 'button' id="submit_driver" class="btn btn-warning block full-width m-b m-t" onclick='submit_        

Answers


Ali Khanusiya February 2016

var formData = new FormData();
formData.append("userfile", $(":file")[0].files[0]);


Waseem Abbas February 2016

Here is how I did it.

var formData = new FormData();

formData.append("userfile", $(":file")[0].files[0]);

The above code is right as long as you have one file and no other input fields. In case you have more input field and multiple file upload in a single form. One should consider target elements by their IDs instead of type $(":file"). Here is how we can get other files:-

 var formData = new FormData();
formData.append("first_file", $("#1st_file_id")[0].files[0]);
formData.append("2nd_file", $("#2nd_file_id")[0].files[0]);
formData.append("3rd_file", $("#3rd_file_id")[0].files[0]);

Here is how we can get data from input fields of form by targeting their IDs.

  formData.append("input_field", $("#input_field_id").val());

In PHP nothing needs to be changed. If we want to get the value of input field we can do it by:-

$var = $_POST['input_field'];
And if its a file, we can capture it by this and do the rest of the work as done in the question.

$_FILES['userfile'] or $_FILE['2nd_file']

Post Status

Asked in February 2016
Viewed 3,399 times
Voted 12
Answered 2 times

Search




Leave an answer