How to submit form data text and images using AJAX

Question

I'm trying to send an image data from Ajax to PHP, I have set the form enc-type to "multipart/form-data".

It sends the text, however, how do I send the file to a .php script?

The line, I am sending the image is

employee_picture = $("#employee_picture").val();

I believe I need to change the .val() to something else, however I don't have the current knowledge to solve the problem.

The Ajax:

<script>
    $(document).ready(function () {
        $("form").submit(function (event) {
            $("#create_employee").attr("disabled", true);
            event.preventDefault();
            var csrf_token = $("#csrf_token").val();
            var first_name = $("#first_name").val();
            var last_name = $("#last_name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var title = $("#title").val();
            var dob = $("#dob").val();
            var other_information = $("#other_information").val();
            var gender = $("#gender").val();
            var address = $("#address").val();
            var address2 = $("#address2").val();
            var city = $("#city").val();
            var postal_code = $("#postal_code").val();
            var e_first_name = $("#e_first_name").val();
            var e_last_name = $("#e_last_name").val();
            var e_phone = $("#e_phone").val();
            var e_relationship = $("#e_relationship").val();
            var employee_picture = $("#employee_picture").val();
            var create_employee = $("#create_employee").val();
            $(".formMessage").load("/app/business/create_employee.php", 
            {
                csrf_token: csrf_token,
                first_name: first_name,
                last_name: last_name,
                email: email,
                phone: phone,
                title: title,
                dob: dob,
                other_information: other_information,
                gender: gender,
                address: address,
                address2: address2,
                city: city,
                postal_code: postal_code,
                e_first_name: e_first_name,
                e_last_name: e_last_name,
                e_phone: e_phone,
                e_relationship: e_relationship,
                employee_picture: employee_picture,
                create_employee: create_employee
            });
        });
    });
</script>

Also, in the php script. How can I access it using $_POST or $_FILES? Thank you!

What type of DOM element is `#employee_picture`? Is it a file input, an img tag, etc. — akenion, Apr 10 '20 at 03:26

score 0 · Answer 1 · answered Apr 10 '20 at 03:52

You are correct that you do not want to use val. You can use the FileReader API(assuming browser support allows it) to actually get the file contents from the file input. See this question for details: Get data from file input in JQuery

You can pass that value as you are doing now and it will just be a string in the form data accessible in the $_POST array server-side. Typically, this will be a base64 encoded value.

If you did a plain form submission(not through AJAX), you would need to use the $_FILES array.

Also, you may want to look at using $.ajax or $.post rather than $.load. I believe $.load will do a GET request when you really mean to do a POST.

How to submit form data text and images using AJAX

1 Answers1