Отправить входной файл через jquery на php

Question

Уважаемые программисты и спасатели,

У меня проблема со страницей регистрации. Я использую jquery для отправки всей информации формы в мой файл PHP. Теперь я хочу добавить функцию, с помощью которой люди также могут загружать свои фотографии в профиль. Но когда я добавлю это, это не будет работать.

Это мой текущий код:

<script>
  $(function () {
    $('button').bind('click', function (event) {

    event.preventDefault();

      $.ajax({
        type: 'POST',
        url: '../includes/register.inc.php',
        data: $('form').serialize(),
        success: function(data){
         document.getElementById("notification").innerHTML = (data);
        }
      });
    });
  });
</script>

В моем файле PHP я обрабатываю его так:

$fname  = $_POST['voornaam'];
$lname  = $_POST['achternaam'];
$gebr   = $_POST['gebruikersnaam'];
$email  = $_POST['email'];
$gdatum = $_POST['gdatum'];
$pass   = $_POST['wachtwoord'];
$pass2  = $_POST['herhaal-wachtwoord'];

$imgFile = $_FILES['user_image']['name'];
$tmp_dir = $_FILES['user_image']['tmp_name'];
$imgSize = $_FILES['user_image']['size'];

Но мой код PHP выдает ошибку этот индекс user_image не определен. Как я могу отправить загрузку файла в мой PHP файл с моим jquery кодом?

Спасибо за помощь.

С уважением, Серж

Answer 1

РЕДАКТИРОВАТЬ (МОЕ РЕШЕНИЕ):

После некоторого использования Google и поиска по каждому веб-сайту я нашел свое решение. Это код, который я использую сейчас:

<script>
  $(document).on("click", "#registreer", function (e) {
    e.preventDefault();

    var formData = $("#signupform").submit(function (e) {
        return;
    });

    var formData = new FormData(formData[0]);
    $.ajax({
        url: '../includes/register.inc.php',
        type: 'POST',
        data: formData,
        success: function (data) {
            document.getElementById("notification").innerHTML = (data);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

Это работает для меня. Теперь он отправляет файл в мой файл PHP. В любом случае, спасибо за помощь. Я обязательно рассмотрю ваше предложение по его улучшению. Спасибо!

Answer 2

А пока go Я сделал нечто подобное и использовал Base64 для изображений.

Ниже приведена пара ссылок, которые могут помочь в этом вопросе:

https://ourcodeworld.com/articles/read/322/how-to-convert-a-base64-image-into-a-image-file-and-upload-it-with-an-asynchronous-form-using-jquery

Загрузить изображение base64 с Ajax

Надеюсь, это поможет.

Рамон