www.webdeveloper.com
Page 19 of 23 FirstFirst ... 91718192021 ... LastLast
Results 271 to 285 of 340

Thread: How to: Upload images using PHP

  1. #271
    Join Date
    May 2009
    Location
    East Indies
    Posts
    11
    Quote Originally Posted by bokeh View Post
    How to upload images using PHP is one of the most frequently asked questions in this PHP forum so I am going to use this post to look at the basics.

    Uploading images can be broken down into the three following steps which will be looked at in turn:
    • An HTML form with a browse button to allow the client to choose which file to upload
    • A script to process the upload, validate the file, name it and place it in the file system
    • Lastly a page to advise the client the upload was a success


    Let's start with the HTML form.
    PHP Code:
    <?php

    // filename: upload.form.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 location of the upload handler script
    $uploadHandler 'http://' $_SERVER['HTTP_HOST'] . $directory_self 'upload.processor.php';

    // set a max file size for the html upload form
    $max_file_size 30000// size in bytes

    // now echo the html page
    ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
            
            <title>Upload form</title>
        
        </head>
        
        <body>
        
        <form id="Upload" action="<?php echo $uploadHandler ?>" enctype="multipart/form-data" method="post">
        
            <h1>
                Upload form
            </h1>
            
            <p>
                <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>">
            </p>
            
            <p>
                <label for="file">File to upload:</label>
                <input id="file" type="file" name="file">
            </p>
                    
            <p>
                <label for="submit">Press to...</label>
                <input id="submit" type="submit" name="submit" value="Upload me!">
            </p>
        
        </form>
        
        
        </body>

    </html>
    The form is just basic HTML but has one very important part which is often accidently omitted making file uploads impossible. This item is contained in the <form> tag, be sure to include it:
    Code:
    <form id="Upload" action="<?php echo $uploadHandler ?>" enctype="multipart/form-data" method="post">
    The other important thing of course is the file <input> tag.
    Code:
    <input id="file" type="file" name="file">
    Lastly, while still on the subject of the upload form, it is possible to add an optional hidden <input> tag which contains the maximum upload filesize and this should come before the file upload field. The value of this field is the filesize in bytes.

    Now on to the upload processing script. This script runs in a linear way and if any step of the script is not satisfied the script will abort and output an error message. The comments in the script explain what each step does, and doesn't really require further explanation.
    PHP Code:
    <?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(=> 'php.ini max file size exceeded'
                    
    => 'html form max file size exceeded'
                    
    => 'file upload was only partial'
                    
    => '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

    ?>
    If the script above came to its conclusion without any error the client will be redirected to a success (A.K.A. landing) page. The following is an example of such a page:
    PHP Code:
    <?php

    // filename: upload.success.php

    ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
            
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
            
            <title>Successful upload</title>
        
        </head>
        
        <body>
        
            <div id="Upload">
                <h1>File upload</h1>
                <p>Congratulations! Your file upload was successful</p>
            </div>
        
        </body>

    </html>
    Finally to tie everything together we need a simple stylesheet:
    HTML Code:
    #Upload {
    	width: 25em;
    	margin: 1em auto;
    	padding:0 2em 2em 2em ;
    	border:1px solid #bbb;
    	color: #333;
    	background:#ffd;
    	font: 0.9em verdana, sans-serif;
    }
    			
    #Upload h1{
    	font: 1.4em bold verdana, sans-serif;
    	margin: 0;
    	padding:1em 0;
    	text-align:center;
    }
    #Upload label{
    	float: left;
    	width: 7em;
    }
    		
    #Upload p {
    	 clear: both;
    }		
    
    .red{
    	color:red;
    }
    Permissions: I'm not going to go into perrmissions in this article as it is a platform specific issue and also varies from server to server depending on the how the server has been configured. General speaking the files will be created 0644 but if that is not the case on your server you will need to chmod() them to at least this permission for them to be web viewable. For more information on the configuration of your particular server consult your host's FAQs.

    That's about it. I have put the whole thing in a zip file which contains all the directories and files needed and which will work without modification if uploaded to a server.

    If you are still unclear about image uploads please consider studying the following offical documentation before posting a question in the forum:
    Here is the source code that you found in a link http://www.w3schools.com/PHP/php_file_upload.asp. Take note you must have "Upload" Folder in your File Manager of your web hosting account.

  2. #272
    Join Date
    Dec 2007
    Posts
    61
    with this script i have no complaints at all, but does it have
    a limit on the total of images i wish to upload?

    it works fine when i try to upload up to 40 images or less,
    but i get upload error when i try to upload 41 or more,even
    if i set the max file size to 1GB. and i don't see a file limit on
    the upload.processor file.

    any ideas?

  3. #273
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,742
    Quote Originally Posted by knightman View Post
    a limit on the total of images i wish to upload?
    PHP has a maximum data size, set in php.ini

  4. #274
    Join Date
    Jun 2009
    Posts
    4
    Hi Bokeh

    Excellent script, thank you but I'm stuck.

    I want to use the script on success to go to the successful upload page with the address to be

    /multiple.upload.success.php?picture1=filename1&picture2=filename2&picture3=filename3

    I have tried lots of times but keep messing up, I assume I need to create a new variable like $names where names is appended to the header instruction like this

    header('Location: ' . $uploadSuccess.'?'.$names);

    I just can't seem to work out what to add to the loop (below) to create this correctly. Can you help?

    Code:
    foreach($active_keys as $key)
    {
    	@move_uploaded_file($_FILES[$fieldname]['tmp_name'][$key], $uploadFilename[$key])
    		or error('receiving directory insuffiecient permission', $uploadForm);
    }

  5. #275
    Join Date
    Jun 2009
    Posts
    4
    Nearly got it here is the code in question

    PHP Code:
    {
        @
    move_uploaded_file($_FILES[$fieldname]['tmp_name'][$key], $uploadFilename[$key])
            or 
    error('receiving directory insuffiecient permission'$uploadForm);
            
    $names=$names.'picture'.$key.'='.$uploadFilename[$key].'&';
    }
        
    // If you got this far, everything has worked and the file has been successfully saved.
    // We are now going to redirect the client to the success page.
    header('Location: ' $uploadSuccess.'?'.$names); 
    However this gives me the whole directory structure in the file name. Is there a way of just getting the name of the image on it's own?

  6. #276
    Join Date
    Jun 2009
    Posts
    4
    No reply needed fixed it with a str_replace.

    See below

    PHP Code:
    foreach($active_keys as $key)
    {
        @
    move_uploaded_file($_FILES[$fieldname]['tmp_name'][$key], $uploadFilename[$key])
            or 
    error('receiving directory insuffiecient permission'$uploadForm);
            
    $names=$names.'picture'.$key.'='.(str_replace('put unnecessary long file description here which will include.../multiple_uploader/uploaded_files/','',$uploadFilename[$key])).'&';
    }
        
    // If you got this far, everything has worked and the file has been successfully saved.
    // We are now going to redirect the client to the success page.
    header('Location: ' $uploadSuccess.'?'.$names); 

  7. #277
    Join Date
    Jun 2009
    Location
    Cannock
    Posts
    30
    There are comprehensive guides for PHP and FTP Part 1 and PHP and FTP 2 which go through this in great detail, if you are interested

  8. #278
    Join Date
    Dec 2007
    Posts
    61
    [QUOTE=mirefoot;1010777]No reply needed fixed it with a str_replace.

    QUOTE]









    the way i made it with my multiple upload processor:


    first, change this line
    PHP Code:
    $uploadSuccess 'http://' $_SERVER['HTTP_HOST'] . $directory_self 'upload.success.php'
    to
    PHP Code:
    $uploadSuccess 'http://' $_SERVER['HTTP_HOST'] . $directory_self 'upload.success.php?log_id='







    after:
    PHP Code:
    // make a unique filename for the uploaded file and check it is 
    // not taken... if it is keep trying until we find a vacant one
    foreach($active_keys as $key)
    {
        
    $now time();
        while(
    file_exists($uploadFilename[$key] = $uploadsDirectory.$now.'-'.$_FILES[$fieldname]['name'][$key]))


        {
            
    $now++;
        }

    put
    PHP Code:
     $h fopen("log-".$now.".txt""w"); 
    the script will create the .txt file.







    change:
    PHP Code:
    // now let's move the file to its final and allocate it with the new filename 
    foreach($active_keys as $key

        @
    move_uploaded_file($_FILES[$fieldname]['tmp_name'][$key], $uploadFilename[$key]) 
            or 
    error('receiving directory insuffiecient permission'$uploadForm); 

    to:
    // now let's move the file to its final and allocate it with the new filename
    foreach($active_keys as $key)
    {
    @move_uploaded_file($_FILES[$fieldname]['tmp_name'][$key], $uploadFilename[$key])
    or error('receiving directory insuffiecient permission', $uploadForm);

    fwrite($h, "$now-".$_FILES[$fieldname]['name'][$key]."."\r\n");
    fclose($h);
    }






    change
    PHP Code:
    header('Location: ' $uploadSuccess); 
    to
    PHP Code:
    header('Location: ' $uploadSuccess $now ); 






    And now, a little rework on the success page:

    PHP Code:
     <?php


    $log 
    $_GET['log_id'];

    ?>

    <head>
        
            
            
    <title>Successful Upload - Log Id: <? echo $_GET['log_id']; ?></title>
        
        




    </head>
        
    <BODY>

        
            <div id="Upload">
                <h1 align="center">
                <font size="5" face="Arial Black">Upload Complete</font></h1>
            
                

            
                
                <div align="center">
                    <table border="0" width="500" cellspacing="0" cellpadding="0">
                        <tr>
                            <td align="center">
                            <align="center"><font color="#FFFFFF"><? include("log-".$log.".txt"); ?></font></td>
                        </tr>
                    </table>


                        

                        
                </div>

                
                    <p align="center">
    &nbsp;</div>

                        

                        
                <p align="center">Upload more / Start again,
                <i>
                <b><a href="URL_OF_YOUR_UPLOAD_PAGE"><font color="#000000">CLICK HERE!</font></a></b></i></p>

            </div>
        
        </body>

    </html>

    this work fine... and with a little extra recoding, you may also make the success page to show thumbs too!
    Last edited by knightman; 06-13-2009 at 02:30 PM.

  9. #279
    Join Date
    Dec 2007
    Posts
    61
    Quote Originally Posted by bokeh View Post
    PHP has a maximum data size, set in php.ini
    solved that, thanks.

  10. #280
    Join Date
    Dec 2007
    Posts
    61
    Is there a way or a code i can use with the script to watermark the images as they are uploaded?

    i have a .gif file with transparency i wish to pun on my images.


    i know about a script that watermarks the images on the fly when they are called like:


    watermark.php?i=imagepath

    and here's the code:
    PHP Code:
    <?php 
    // this script creates a watermarked image from an image file - can be a .jpg .gif or .png file 
    // where watermark.gif is a mostly transparent gif image with the watermark - goes in the same directory as this script 
    // where this script is named watermark.php 
    // call this script with an image tag 
    // <img src="watermark.php?i=imagepath"> where path is a relative path such as subdirectory/image.jpg 
    $imagesource =  $_GET['i']; 
    $filetype substr($imagesource,strlen($imagesource)-4,4); 
    $filetype strtolower($filetype); 
    if(
    $filetype == ".gif")  $image = @imagecreatefromgif("IMAGES_DIR/".$imagesource);  
    if(
    $filetype == ".jpg")  $image = @imagecreatefromjpeg("IMAGES_DIR/".$imagesource);  
    if(
    $filetype == ".png")  $image = @imagecreatefrompng("IMAGES_DIR/".$imagesource);  
    if (!
    $image) die(); 
    $watermark = @imagecreatefromgif('watermark.gif'); 
    $imagewidth imagesx($image); 
    $imageheight imagesy($image);  
    $watermarkwidth =  imagesx($watermark); 
    $watermarkheight =  imagesy($watermark); 
    $startwidth = (($imagewidth $watermarkwidth)/20); 
    $startheight = (($imageheight $watermarkheight)/40); 
    imagecopy($image$watermark,  $startwidth$startheight00$watermarkwidth$watermarkheight); 
    imagejpeg($image); 
    imagedestroy($image); 
    imagedestroy($watermark); 
    ?>
    but that's not what i'm looking for.
    what i want is to store the watermarked images on the uploadsDirectory .

    any ideas?

  11. #281
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,742
    Quote Originally Posted by knightman View Post
    Is there a way or a code i can use with the script to watermark the images as they are uploaded?
    Have a look at the watermarking code in my signature. It can be used either for outputting or saving the images.

  12. #282
    Join Date
    Jun 2009
    Posts
    2
    Hello,

    Simple question- does this method also support uploading videos?

    Thanks.

  13. #283
    Join Date
    Apr 2007
    Posts
    1,664
    If the servers file size is set higher than the size of the video you can use this method to upload videos but this code it set up to upload images. You would need to tweak it.

  14. #284
    Join Date
    Jun 2009
    Posts
    2
    Quote Originally Posted by SyCo View Post
    If the servers file size is set higher than the size of the video you can use this method to upload videos but this code it set up to upload images. You would need to tweak it.
    Thanks for the response. In order to tweak it, does that mean just adjusting the file size the server allows, or tweaking something different?

  15. #285
    Join Date
    Apr 2007
    Posts
    1,664
    file max file size has to be set in the php.ini. Possibly in an .htaccess file too. I'm on IIS here so can't tell you for sure.

    The script is for images and uses checks to see it's an image (please see my previous posts in this thread about the insecurity that exists). You would need to remove them and add a file extension check for the type of files you allow.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles