how do you upload an image file with jquery & php?

Question

Jquery submits the form onchange. The form submits and the posts register, but the file itself "goes missing" and does not upload - is there an explanation why this is happening:

    $('#wizardpicture').change(function() {
        var filename = $('#wizardpicture').val();
        var fileselect = filename;
        //alert(filename);
  
        var url = 'upload.php';
        var form = $('<form action="' + url + '" method="post" enctype="multipart/form-data">' +
        '<input type="hidden" id="fileselect" name="fileselect" value="' + fileselect + '" />' +
        '</form>');
        $('body').append(form);
        setTimeout(function() {
            form.submit();
        },800);
    });

THE PHP:

$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {

// AJAX call
file_put_contents(
    'uploads/' . $fn,
    file_get_contents('php://input')
);
echo "$fn uploaded";
exit();

}else {

// form submit
$files = $_FILES['fileselect'];
//print_r($_POST);
foreach ($files['error'] as $id => $err) {
    if ($err == UPLOAD_ERR_OK) {
        $fn = $files['name'][$id];
        move_uploaded_file(
            $files['tmp_name'][$id],
            'uploads/' . $fn
        );
        echo "uploaded";
        die();
    }else{
        echo "not uploaded";
        die();
    }
}
}