0

I have just setup a fileupload.php so that I can upload files but am interesting in having the files instantly be setup on the page that I want it with the css that I assign. Is there a way to do this? I would like to have three columns of photos that viewers can see as I upload the files so I do not have to manually add it into the code every single time I want to add a photo to the page.

I already know how to make a grid with the photos but am really interested in how to actually have all the photos uploaded to the page to instantly be placed on that grid.

My graphics.php page :

<?php include 'includes/header.php' ?>



<div class="graphics_content">
    <div class="page_top_image">
        <img src="includes/img/heartfx_graphics.png" class="img-responsive" alt="Responsive image">
    </div>
</div>

<div class="photo_upload">
    <div class="photo_upload_form">
        <form action="upload.php" method="post" enctype="multipart/form-data">
            Select image to upload:
            <br>
            <input type="file" name="fileToUpload" id="fileToUpload">
            <br>
            <input type="submit" value="Upload Image" name="submit">
        </form>
    </div>
</div>

My upload.php page : 

<?php
        $target_dir = "uploads/";
        $target_file = $target_dir .basename($_FILES["fileToUpload"]["name"]);
        $uploadOK = 1;
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        //Check if image file is an actual image or a 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 != "png") {
            echo "Sorry, only PNG 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.";
            }
        }

        ?>

Thank you in advance for any help. If anything is needed from my code that you would like me to provide I can do so.

Best regards, Codi

codibez
  • 33
  • 9
  • 1
    You should 'read' your uploads folder with php, and display images: http://stackoverflow.com/questions/11903289/pull-all-images-from-a-specified-directory-and-then-display-them – sinisake Mar 14 '15 at 06:56
  • Use `scandir()` and loop through the results. – Rasclatt Mar 14 '15 at 06:57
  • @nevermind thank you for your help, would like to mark your comment as an answer but can't do so as it is just a comment on my question. That link has pointed me to the answer. – codibez Mar 14 '15 at 07:17
  • @nevermind is there any easy way to style these images as well? I can't seem to wrap them into a div correctly in order to style them. – codibez Mar 14 '15 at 07:56
  • @CodiBezouka-Smith, you should build some kind of template - open div BEFORE loop, style it, and then loop through images (you can add desired class to image, inside php code ... depending on your needs. Not sure about dimensions, and desired output, but, basically - simple html/css will do the job... – sinisake Mar 14 '15 at 08:10
  • `$dir = '/my/image/folder/'; $files = scandir($dir); foreach($files as $filename) { echo $filename; } `. Something like this. You will see the results and hopefully know where to go from there. – Rasclatt Mar 14 '15 at 18:33

0 Answers0