Page 1 of 1

Problems displaying uploaded images

Posted: Wed May 07, 2008 4:18 am
by KirstyBurgoine
Hi,
I'm building some pages that allow sombebody to upload images to the server and then display them in a seperate window. I've got the upload part of the process working but am having difficulties displaying them.


I've got my page to work using the file name as the link to open a new window but what I want is thumbnails instead.
This is my code for upload.processor.php which my upload form points to:

Code: Select all

 
<?php
 
// filename: upload.processor.php
 
// first let's set some variables
 
// make a note of the current working directory, relative to root.
$directory_self = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
 
// make a note of the directory that will recieve the uploaded file
$uploadsDirectory = $_SERVER['DOCUMENT_ROOT'] . $directory_self . 'uploaded_files/';
 
// make a note of the location of the upload form in case we need it
$uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'upload.form.php';
 
// make a note of the location of the success page
$uploadSuccess = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'upload.success.php';
 
// fieldname used within the file <input> of the HTML form
$fieldname = 'file';
 
// Now let's deal with the upload
 
// possible PHP upload errors
$errors = array(1 => 'php.ini max file size exceeded',
                2 => 'html form max file size exceeded',
                3 => 'file upload was only partial',
                4 => 'no file was attached');
 
// check the upload form was actually submitted else print the form
isset($_POST['submit'])
    or error('the upload form is neaded', $uploadForm);
 
// check for PHP's built-in uploading errors
($_FILES[$fieldname]['error'] == 0)
    or error($errors[$_FILES[$fieldname]['error']], $uploadForm);
    
// check that the file we are working on really was the subject of an HTTP upload
@is_uploaded_file($_FILES[$fieldname]['tmp_name'])
    or error('not an HTTP upload', $uploadForm);
    
// validation... since this is an image upload script we should run a check  
// to make sure the uploaded file is in fact an image. Here is a simple check:
// getimagesize() returns false if the file tested is not an image.
@getimagesize($_FILES[$fieldname]['tmp_name'])
    or error('only image uploads are allowed', $uploadForm);
    
// make a unique filename for the uploaded file and check it is not already
// taken... if it is already taken keep trying until we find a vacant one
// sample filename: 1140732936-filename.jpg
$now = time();
while(file_exists($uploadFilename = $uploadsDirectory.$now.'-'.$_FILES[$fieldname]['name']))
{
    $now++;
}
 
// now let's move the file to its final location and allocate the new filename to it
@move_uploaded_file($_FILES[$fieldname]['tmp_name'], $uploadFilename)
    or error('receiving directory insuffiecient permission', $uploadForm);
    
// If you got this far, everything has worked and the file has been successfully saved.
// We are now going to redirect the client to a success page.
header('Location: ' . $uploadSuccess);
 
// The following function is an error handler which is used
// to output an HTML error page if the file upload fails
function error($error, $location, $seconds = 5)
{
    header("Refresh: $seconds; URL=\"$location\"");
    echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'."\n".
    '"http://www.w3.org/TR/html4/strict.dtd">'."\n\n".
    '<html lang="en">'."\n".
    '    <head>'."\n".
    '        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">'."\n\n".
    '        <link rel="stylesheet" type="text/css" href="stylesheet.css">'."\n\n".
    '    <title>Upload error</title>'."\n\n".
    '    </head>'."\n\n".
    '    <body>'."\n\n".
    '    <div id="Upload">'."\n\n".
    '        <h1>Upload failure</h1>'."\n\n".
    '        <p>An error has occured: '."\n\n".
    '        <span class="red">' . $error . '...</span>'."\n\n".
    '         The upload form is reloading</p>'."\n\n".
    '     </div>'."\n\n".
    '</html>';
    exit;
} // end error handler
 
?> 
 
This is my code for the thumbnail page:

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Images</title>
    <script language="JavaScript">
    <!-- // Hide from old browsers.
    
    // Make a pop-up window function.
    function create_window (image, width, height) {
    
        // Add some pixels to the width and height.
        width = width + 25;
        height = height + 50;
        
        // If the window is already open, resize it to the new dimensions.
        if (window.popup_window && !window.popup_window.closed) {
            window.popup_window.resizeTo(width, height);
        } 
        
        // Set the window properties.
        var window_specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height;
        
        // Set the URL.
        var url = "image_window.php?image=" + image;
        
        // Create the pop-up window.
        popup_window = window.open(url, "PictureWindow", window_specs);
        popup_window.focus();
        
    } // End of function.
    //--></script>
</head>
<body>
<div align="center">Click on an image to view it in a separate window.</div><br />
<table align="center" cellspacing="5" cellpadding="5" border="1">
    <tr>
        <td align="center"><b>Image Name</b></td>
        <td align="center"><b>Image Size</b></td>
    </tr>
<?php # Script 11.2 - images.php
// This script lists the images in the uploads directory.
 
$dir = 'uploaded_files'; // Define the directory to view.
 
$files = scandir($dir); // Read all the images into an array.
 
// Display each image caption as a link to the JavaScript function.
foreach ($files as $image) {
 
    if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period.
    
        // Get the image's size in pixels.
        $image_size = getimagesize ("$dir/$image");
        
        // Calculate the image's size in kilobytes.
        $file_size = round ( (filesize ("$dir/$image")) / 1024) . "kb";
        
        // Print the information.
        echo "  <tr>
            <td><a href=\"javascript&#058;create_window('$image',$image_size[0],$image_size[1])\"><img src=\"$image\" width=\"50px\" height=\"50px\" /></a></td>
            <td>$file_size</td>
        </tr>";
    
    } // End of the IF.
    
} // End of the foreach loop.
?>
</table>
</body>
</html>
 
 
I don't know much about php and I haven't written this script from scratch. It came from a php/mySQL book I have. I've only modified it a bit. Originally I wanted to be able to upload the image to a mySQL database using MEDIUMBLOB so that I could then allow the person to add a comment. I got that to work but I couldn't figure out how to display the image. Therefore thought this would be easier until I find my feet a bit more with php. I can't find any good tutorials to help me achieve what I want and I cannot figure out how to display the image.

Can someone help?
You can view the page I want to include thumbnails on at:
http://www.kasiasnailandhairstudio.co.uk/images.php

Thanks
Kirsty

Re: Problems displaying uploaded images

Posted: Wed May 07, 2008 5:38 pm
by Jade
Are you using the right URL to reference them? When you go to display the image make sure it has uploaded_files in front of the path to the image. Otherwise you'll be trying to grab the image from a place where the image doesn't exist.

Re: Problems displaying uploaded images

Posted: Thu May 08, 2008 2:08 am
by Mordred
:offtopic:
This is insecure:

Code: Select all

while(file_exists($uploadFilename = $uploadsDirectory.$now.'-'.$_FILES[$fieldname]['name']))
Don't use ['name'], unless for display or attachment-name when serving it back to the user (after escaping of course)