AJAX image upload error with PHP

Question

Why do I get this error? Am I missing code fragments? If so please give a simple explanation. I am very beginner to ajax and jQuery. I already searched Google. But many of them are technical about image uploading that I don't understand. Help me. thanks.

$(document).ready( function(e) {

            $(".frmUpload").on('submit',(function(e) {
                    e.preventDefault();
                    $(".upload-msg").text('Loading...');
                    $.ajax({
                        url: "processor2.php",
                        type: "POST",

                        success: function(data){ //function to be called if request succeeds
                            $(".upload-msg").html(data);
                        }
                    });
            }));
    });

            <h1>Ajax Image Upload</h1>
        <form action="" method="post" class="frmUpload">
            <input type="file" name="photoUpload" id="ajaxUpload">
            <input type="submit" value="UPLOAD">
        </form>
        <div class="img-preview"></div>
        <div class="upload-msg"></div>

PHP script is shown below;

<?php   
        // photoUpload was given to name attribute of the upload field in the form
        if( is_uploaded_file($_FILES['photoUpload']['tmp_name']) && $_FILES['photoUpload']['error']==0 ) {
            echo "The file was uploaded successfully to the temporary location, but has not been saved<br>";
            echo "<br>The file is temporary stored: ". $_FILES['photoUpload']['tmp_name'];
            echo "<br>The file name was: ". $_FILES['photoUpload']['name'];
            echo "<br>The file type is: ". $_FILES['photoUpload']['type'];
            echo "<br>The file size (bytes) is: ". $_FILES['photoUpload']['size'];

            //check file size
            if ( $_FILES['photoUpload']['size'] > 5242880 ) 
                die ("<hr>Sorry, this file is larger than 5 MB");

            echo "<hr>";
            $allowedExts = array( "gif", "jpeg", "jpg", "png" );
            $exp_array = explode(".", strtolower($_FILES['photoUpload']['name']));
            $extension = end($exp_array);

            $allowedType = array( "image/gif", "image/jpeg", "image/jpg", "image/png" );

            if( !in_array($_FILES['photoUpload']['type'], $allowedType) )
                die ("<br>Unsupported file type!");

            if( !in_array($extension, $allowedExts) )
                die ("<br>Unsupported file extension!");

            // file_exists() - determine file has already been uploaded
            $path = "C:/xampp/htdocs/PHP/". $_FILES['photoUpload']['name'];

            if(!file_exists($path)){
                echo "<hr>File does not exist. It is safe to move the temporary file<br>";
                if( move_uploaded_file($_FILES['photoUpload']['tmp_name'], $path) ){
                    echo "The file was uploaded successfully.";
                }
                else{
                    echo "File upload failed!";
                }
            }
            else{
                echo "<br>File already exist. Please upload another file";
            }

        }
        else{
            echo "Please select the file to upload<br>";
            echo "Error code: ". $_FILES['photoUpload']['error'];
        }
    ?>

Possible duplicate of [PHP: "Notice: Undefined variable" and "Notice: Undefined index"](http://stackoverflow.com/questions/4261133/php-notice-undefined-variable-and-notice-undefined-index) — Charlotte Dunois, Apr 17 '16 at 14:55
A pure AJAX file upload system is not possible because of security limitations of JavaScript.And also in your code ajax request is forwarded without any data.This link may be useful http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Kiran Muralee, Apr 17 '16 at 14:58

score 1 · Answer 1 · answered Apr 17 '16 at 15:08

The asynchronous file upload, using some XMLHttpRequest (Ajax), is technically not possible because of security limitations of JavaScript. Most JavaScript examples and tutorials call this method still Ajax upload and the image or file is uploaded by using a “virtual IFRAME”.You can use some third party plugins to implement the ajax file upload functionality.

score 1 · Accepted Answer · answered Apr 17 '16 at 19:37

You have to use "formData" to upload image with ajax.

try below code. and check for $_FILES['photoUpload']['tmp_name'] and $_FILES['photoUpload']['name'] variables in your PHP script.

$(".frmUpload").on('submit',(function(e) {
                    e.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
                        url: "processor2.php",
                        type: "POST",
                        data: formData,
                        async : true,
                        contentType: false,       // The content type used when sending data to the server.
                        cache: false,             // To unable request pages to be cached
                        processData:false, 
                        success: function(data){ //function to be called if request succeeds
                            $(".upload-msg").html(data);
                        }
                    });
            }));

script works 100% when I removed async : true, Why is that? Anyway thanks a lot — Praba, Apr 18 '16 at 01:19

AJAX image upload error with PHP

2 Answers2