Как отправить данные формы текста и изображения, используя AJAX

Question

Я пытаюсь отправить данные изображения от Ajax до PHP, я установил форму en c -type в "multipart / form-data".

Он отправляет текст, однако, как я могу отправить файл в сценарий. php?

Строка, я отправляю изображение:

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

Я считаю, что мне нужно изменить .val () на что-то другое, однако у меня нет текущих знаний для решения проблемы.

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>

Также в скрипте php. Как я могу получить к нему доступ, используя $ _POST или $ _FILES? Спасибо!

Answer 1

Вы правы, что не хотите использовать val. Вы можете использовать API-интерфейс FileReader (если это позволяет поддержка браузера) для фактического получения содержимого файла из файла. Подробности смотрите в этом вопросе: Получить данные из файла ввода в JQuery

Вы можете передать это значение, как вы делаете сейчас, и оно будет просто строкой в ​​данных формы, доступных в массив $_POST на стороне сервера. Как правило, это будет значение в кодировке base64.

Если вы отправили простую форму (не через AJAX), вам нужно будет использовать массив $_FILES.

Также, Вы можете посмотреть, используя $.ajax или $.post вместо $.load. Я верю, что $.load сделает запрос GET, когда вы действительно хотите сделать POST.