Upload Image with PHP and append with JQuery

Question

I have a simple admin page which is used to edit the content on a main page.

On the admin page, you can upload a file. (which works)

here's the php upload code:

$target_dir = "../images/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["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["fileToUpload"]["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["fileToUpload"]["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 {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}

However...

When I upload the file, I want to automatically append it to an element on the main page (a gallery of images).

The CSS makes thumbnail views as shown on w3schools (http://www.w3schools.com/css/css_image_gallery.asp) and when you click the image it opens a new window with the full image.

Here is my HTML code:

                <aside id="rooms">

                <h3>Room Types</h3>

                <div class="img">
                    <p>1 Bedroom</p>
                    <a target="_blank" href="./images/room1bed.jpg"><img src="./images/room1bed.jpg" width="110" height="90"></a>
                </div>

                <div class="img">
                    <p>2 Bedroom</p>
                    <a target="_blank" href="./images/room2bed.jpg"><img src="./images/room2bed.jpg" width="110" height="90"></a>
                </div>

                <div class="img">
                    <p>Suite</p>
                    <a target="_blank" href="./images/roomsuite.jpg"><img src="./images/roomsuite.jpg" width="110" height="90"></a>                 
                </div>

            </aside>

Basically, I want to use the JQuery append to add the newly uploaded file to the aside that contains the divs for the images...

How do i grab the filename on upload and implement the append?

Here is what I basically want to do...

$( "#rooms" ).append( "<div class="img">
                        <p>**new description**</p>
                        <a target="_blank" href="./images/**uploaded file**"><img src="./images/**uploaded file**" width="110" height="90"></a>
                    </div>" );

Read this -> http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Pratik, Feb 22 '15 at 08:55
I appreciate the reference however I am not complete certain how this pertains to my question. Can you help clarify? — user3029953, Feb 22 '15 at 08:58
The PHP code i provided above handles the upload of the file. The file successfully uploads to the server in the appropriate directory. I want to use that file and append it to the already existing gallery. — user3029953, Feb 22 '15 at 09:09

score 0 · Answer 1 · answered Feb 22 '15 at 09:00

0

I believe you only need PHP code to do that (no jquery).

Look at the following code:

<aside id="rooms">

    <h3>Room Types</h3>

    <?php 
        $files = glob(".images/*.*");
        for ($i=0; $i<count($files); $i++)
        {
            $j = i + 1;
            $num = $files[$i]; 
            echo    '<div class="img">
                        <p>'.$j.' Bedroom</p>
                        <a target="_blank" href="./'.$num.'"><img src="./'.$num.'" width="110" height="90"></a>
                    </div>'
        } 
    ?>
</aside>

answered Feb 22 '15 at 09:00

Inzamam Tahir

515
4
16

I've tried replacing what I have with this and it now does not load the page. I am fairly new to all of this, so please bare with me. – user3029953 Feb 22 '15 at 09:06
well, it's fine.....but the thing is that my code is not there to just copy/paste ...have a look at it.....and understand it first...otherwise you won't get the answer – Inzamam Tahir Feb 22 '15 at 09:12
I am... but then again, still sort of new to this. From my understanding you are taking all files in the images folder and adding them to the aside with the appropriate div. This being done by looping through the files in the folder with a for loop. I have updated my question with that I thought would work but did not. – user3029953 Feb 22 '15 at 09:16
Your updated question is the same as that of my answer $files is an array containing all the images and $num equals .images/ImageName.extension. If that does not work, then try to first echo $num and $files to be sure what values are saved in these variables – Inzamam Tahir Feb 22 '15 at 09:23

score 0 · Answer 2 · answered Feb 22 '15 at 09:20

Call this function on AJAX success :

return full File path after uploading via PHP instead of your Message like -> The file has been uploaded .....

    echo json_encode(array("file_path"=>"Your_Full_Path_For_Image_Storage".$_FILES["fileToUpload"]["name"],"message"=>"The file has been uploaded.");

Use dataType=JSON in Ajax parameter. And in jQuery AJAX Call success say you get in response , responseObj . So append new div to Rooms outer div.And then in that HTML , have file_path as img src returned by AJAX call in php.

$("#rooms").append('<div class="img">
                <a target="_blank" href="+responseObj.file_path+"><img src="+file_path+" width="110" height="90"></a>                 
            </div>

Upload Image with PHP and append with JQuery

2 Answers2