How I can get in PHP to image uploaded by jQuery

Question

I'm maiking simple form with image upload option. I have problem with getting access to my uploaded file through jQuery in my PHP code.

How I can check uploaded file name, size in PHP?

HTML:

    <form id="conversion_form" method="post" action="#" enctype="multipart/form-data">
            <input type="text" id="prize_name" size="25" value="">
<textarea rows="8" cols="75" name="lista_losowanie" id="lista_losowanie">
            <input id="file_img" type="file" name="image">
            <div id="uploadPreview"></div>
            </div>
            <p><input id="button_draw" class="btn btn-lg btn-success" type="submit" value="Losowanie" /></p>
            </form>

This is my Ajax, sending prize_name works good, but I have problem with my uploaded image. How I can send it in Ajax and receive in my PHP?

AJAX:

$('#button_draw').click(function(e) {
e.preventDefault();

    var formData = new FormData();
    // let's just take the first image
    var file = $('#file_img')[0].files[0];


    // but you also need to add the other fields to formData
    var lista = $(this).closest('form').find('#lista_losowanie').val();
    var prize_name = $(this).closest('form').find('#prizename').val();

    formData.append('prize_img', file);
    formData.append('lista', lista);
    formData.append('prize_name', prize_name);

    console.log(formData);
    alert (formData);


            $.ajax({
            context: this,
            url: './inc/new_draw.php',
            data: formData,
            type: 'POST',
            success: function(response){
            //odpowiedź serwera

            //Trzeba sparsować zwrot
            var json = JSON.parse(response);

            if(json.odp == 1){

            }

            if(response == 2){

            }

            },
            error: function(x,n,o){
            }
           });



  });

PHP:

<?php

include ("config.php");

$prize_name = mysqli_real_escape_string($con, $prize_name);
$prize_img = mysqli_real_escape_string($con, $prize_img);

//HOW I CAN GET ACCESS TO UPLOADED IMAGE? HOW I CAN CHECK FILE SIZE ETC. THIS BELOW DOESNT WORK.

        $file_size = $prize_img['size'];
        $file_name = $prize_img['name'];
        $file_type = $prize_img['type'];

        echo $file_size;

        if ($prize_name == NULL) {
            $problem = TRUE;
            $problem_code = 1;
            echo json_encode($dodano);
        }
?>

Answer 1

The Ajax method does support file upload, but only in newer browsers. For that you could use the XmlHttpRequest2 object and in your case ideally with a FormData object which will contain all the data (+ image) you want to submit, see this Article.

If you want to go with this, you can get the file via the HTML5 File API, quick example:

var formData = new FormData();
// let's just take the first image
var file = $('#fileinput').files[0];

// but you also need to add the other fields to formData
var lista = $(this).closest('form').find('#lista_losowanie').val();
var prize_name = $(this).closest('form').find('#prizename').val();

formData.append('prize_img', file);
formData.append('lista', lista);
formData.append('prize_name', prize_name);

// now you pass the formData object as data
$.ajax({
    context: this,
    url: './inc/new_draw.php',
    data: formData,
    // ....
});

As you can see, files is an array - so if you would use multiple select on your file input field, you could simply iterate through that array to get all selected images.

On the PHP side, if you use FormData, you will need to use the $_FILES array. See here: PHP $_FILES array.

From my example above, you would access the array like this (also added extension):

$size = $_FILES['prize_img']['size']
$name = $_FILES['prize_img']['name']
$type = $_FILES['prize_img']['type']
$extension = pathinfo($name, PATHINFO_EXTENSION);

With the XHR2 you could also do cool stuff such as tracking the progress of your uploaded file (progress bar). If you need compatibility for older browsers, there is an approach using iframes: example.