通过Ajax将多部分表单数据转发到PHP

Question

I have a form in my HTML. This form takes text inputs and one image:

HTML

<form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">             
                        <textarea style="display: none" class="inputNumber" name="pages"></textarea>
                        <p>Image</p>
                        <input style="padding: 0px" type="file" name="image">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                        </form>

This form will be submitted through Ajax:

jQuery/Ajax

            $('body').on('submit', '.article_properties_form', function(e) {
          e.preventDefault();

          if ($(this).valid()) {
          $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function() {

                        }   
                    }); 
          }

        });

The data will be relayed to PHP:

PHP

if (isset($_POST["subtitle"], $_POST["pages"], $_POST["text"], $_POST["image"]))
    {
                //Some SQL
    }

The form works successfully when I remove the enctype and the input type="image" property. This means that I must be doing something wrong with the image property. I can't figure out how to relay this form through Ajax to PHP with the image property intact. How can I accomplish this?

Answer 1

You need to keep the enctype and to catch the file value, you need to use $_FILES['image'] to get the "image" value.

On the AJAX code, use this:

data: new FormData( this ),
processData: false,
contentType: false