PHP Ajax Image Upload bug

Question

I try at the moment to get my Ajax image upload working. But sadly its not working and i cant find the reason.

<script>
    $(document).ready(function() {

        $("#uploadBTN").click(function(event) {
            event.preventDefault();
            var tmp_form = $("#fileinfo")[0];
            var fd = new FormData(tmp_form);
            $.ajax({
                url: './ajax/image_post_upload.php',  
                type: 'POST',
                data: fd,
                async: true,
                success:function(data){
                    $('#output').html(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });

        });

    });

</script>

    <form id="fileinfo">
    <input id="fileinfo" name="userImage" type="file" class="file" />
    <div id="uploadBTN">SUBMIT</div>
    </form>

<div id=output>LOG HERE</div>

image_post_upload.php

<?php
if(isset($_FILES['file'])){
    $filename = $_FILES['file']['name'];
    if(isset($_FILES['file']['name']) && !empty($filename)){        

        $target_dir = "./UPLOADS/";
        $target_file = $target_dir . basename($_FILES["file"]["name"]);
        $uploadOk = 1;
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        // Check if image file is a actual image or fake image
        if(isset($_POST["submit"])) {
            $check = getimagesize($_FILES["file"]["tmp_name"]);
            if($check !== false) {
                echo "File is an image - " . $check["mime"] . ".";
                $uploadOk = 1;
            } else {
                echo "File is not an image.";
                $uploadOk = 0;
            }
        }
        // Check if file already exists
        if (file_exists($target_file)) {
            echo "Sorry, file already exists.";
            $uploadOk = 0;
        }
        // Check file size
        if ($_FILES["file"]["size"] > 500000) {
            echo "Sorry, your file is too large.";
            $uploadOk = 0;
        }
        // Allow certain file formats
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
        && $imageFileType != "gif" ) {
            echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
            $uploadOk = 0;
        }
        // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
            echo "Sorry, your file was not uploaded.";
        // if everything is ok, try to upload file
        } else {
            $root = getcwd();
            if (move_uploaded_file($_FILES["file"]["tmp_name"], $root.$target_file)) {
                echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
            } else {
                echo "Sorry, there was an error uploading your file.";
            }
        }

    }else{
        echo 'please choose a file';
    }
}else{
    echo 'not set';
}
?>

At the moment its everytime saying not set? What is wrong in my Script?

Answer 1

Your HTML name attribute for your file input does not match the PHP $_FILES['file'] , which is why if(isset($_FILES['file'])) is returning false.

You can fix this by changing your HTML to match your PHP:

<input id="fileinfo" name="file" type="file" class="file" />

Hope that helps!

Answer 2

You File-Input name is userImage and you are accessing it as $_FILES['file'] ,

So use any one code from below two.

HTML : <input id="fileinfo" name="userImage" type="file" class="file" />

PHP : $_FILES['userImage']

---

HTML : <input id="fileinfo" name="file" type="file" class="file" />

PHP : $_FILES['file']