Upload file in iFrame

Question

I'm trying to upload a file in an iFrame, so far everything seems to work fine, but I can't process the image in the PHP end as it doesn't seem to receive it...

It does seem to upload though as my progress bar does work and show progress and completes. The responseText says: No image selected?

Here is my aJax:

function submitFile() {
    //The file location
    var theFile = document.getElementById("image").files[0];
    var xhr = new XMLHttpRequest();
    //Disable submit button whilst upload is active
    doc("submit").disabled = true;

    //Completed
    xhr.onload = function(e) {
        if (this.status == 200) {
            document.getElementById("imageUpload").innerHTML = xhr.responseText;
            doc("submit").disabled = false; //Unlock submit button
        }
    };

    //Progress
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var currentPercentage = Math.round(e.loaded / e.total * 100);
            document.getElementById("imageUpload").innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
            document.getElementById("imageUpload").style.backgroundSize = currentPercentage + "% 100%";
        }
    };

    //Send data
    xhr.open("POST", "php/uploadImage.php", true);
    xhr.send(theFile);
}

This is the form where I am submitting the image from, it uploads when I select the file however and not when I click submit see the onchange function.

<form action="php/submitMessage.php" onsubmit="validation(this)" method="post" id="submitMessage" enctype="multipart/form-data">
    <div class="left half">
        <input class="text" type="text" name="name" placeholder="First and Second Name" 
        rules="[A-Za-z]*\s[A-Za-z]*" />
        <input class="text" type="text" name="email" placeholder="Email Address" 
        rules="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" />
        <textarea name="message" placeholder="Enter your message here..." rows="5"></textarea>
    </div>
    <div class="right half">
        <input class="text" type="text" name="reg" placeholder="Car Registration"/>
        <input type="file" onchange="submitFile();" name="image" id="image" style="display:none;" />
        <input type="hidden" name="image_location" id="image_location"/>
        <label for="image" id="imageUpload" class="uploadBtn">Upload Image</label>
        <p>Message will be regarded as a quote request if you provide an image.</p>
    </div>
    <input type="submit" id="submit" style="background-color:#fff;color:#000;" value="Submit Message/Quote" />
</form>

This is my PHP, I want to receive the file, resize it, and then set a session variable to its location which will be used when the rest of the form is submitted as the file location will need to be added to the database row.

<?php
session_start();

//Image was selected
if($_FILES['image']['tmp_name']) {
    //any errors?
    if(!$_FILES['image']['error']) {
        //validate the file and setup future filename
        $new_file = date("Ymdhisa");

        //Can't be larger than 5MB
        if ($_FILES['image']['size'] > 5000000) {
            //Resize the file
            $width = 500;

            //Keep aspect ratio
            $size = getimagesize($_FILES['image']['tmp_name']);
            $height = round($width*$size[1]/$size[0]);

            //Create object
            if ($size[2] == 1) {
                $images_orig = imagecreatefromgif($_FILES['image']['tmp_name']);
            } else if ($size[2] == 2) {
                $images_orig = imagecreatefromjpeg($_FILES['image']['tmp_name']);
            } else if ($size[2] == 3) {
                $images_orig = imagecreatefrompng($_FILES['image']['tmp_name']);
            }

            //Get image size to create object
            $photoX = imagesx($images_orig);
            $photoY = imagesy($images_orig);

            //Create resized object
            $images_fin = imagecreatetruecolor($width, $height);
            imagecopyresampled($images_fin,$images_orig,0,0,0,0,$width+1,$height+1,$photoX,$photoY); //Resize the image
            imagejpeg($images_fin,"images/".$new_images); //Save image to file

            //Remove image from memory
            imagedestroy($images_orig);
            imagedestroy($images_fin);

            //Set session key for file location
            $_SESSION['tmp_image'] = "uploads/".$new_file; //Should be unset when message has been sent
            $message = "File successfully uploaded!";
            echo $message;
        }
    }
    else 
    {
        $message = "There was an error: ".$_FILES['image']['error'];
        echo $message;
    }
} else {
    echo "No image selected?";
}
?>

Answer 1

This is my code and its work fine too me , Hope work for you too

 function submitVisualMedia()
            {
                $(document).ready(function (e) {
                    var fd = new FormData($("#fileinfo")[0]);
                    $.ajax({
                        url:, //YOUR DESTINATION PAGE
                        type: "POST",
                        data: fd,
                        enctype: 'multipart/form-data',
                        processData: false, // tell jQuery not to process the data
                        contentType: false, // tell jQuery not to set contentType
                        success: function ()
                        {
                     //some code if you want
 
                        }
                    });


                });
                return false;


            }

   <form method="post" id="fileinfo" onsubmit='return submitVisualMedia()'  >
                <input  class="form-control"  type="text" id="title" >
                <input  class="form-control"  type="file" name="visualMedia" id="visualMedia"   accept="image/*">
               <button class="btn btn-success" type="submit">Upload</button>
                             </form>

and php side

public function uploadVisualMedia() {

    ini_set('upload_max_filesize', '25M');
    ini_set('post_max_size', '25M');
    ini_set('max_input_time', 300);
    ini_set('max_execution_time', 300);

    $fname = date('l-j-m-Y').'-'.rand(1,1000000);
    $size = $_FILES['visualMedia']['size'];
    $ftype = $_FILES['visualMedia']['type'];
    $temp = $_FILES['visualMedia']['tmp_name'];
    $type = array();
    $type = explode("/", $ftype);
    $filename = "galleries/" . $type[0] . "_gallery/" . $fname . "." . $type[1];
    $index = 0;
    while (file_exists($filename)) {
        $filename = "galleries/" . $type[0] . "_gallery/" . $fname . "($index)" . "." . $type[1];
        $index++;
    }
    move_uploaded_file($temp, $filename);

}

You most change little in this code and it should work for you fine . with this you can upload video an audio too. change $filename to some folder name you want..