Tutorial: How to make an Image Upload and Thumbnailer Script PHP

Tutorial: How to make an Image Upload and Thumbnailer Script PHP

In this tutorial we will make a thumbnailing script using PHP. The script will allow your users to upload their images using a html form, and then be shown the thumbnail and a link to the file on completion. Also the user will be able to specify a max height or width if they want to.

Demo: http://www.jotlab.com/tutorials/thumbtutorial/thumb.php

*Thats right you can host images on my website. But i have edited my code to make the maximum size no greater than 300 pixels*

So start off with. Make a directory on your webserver, call it whatever you want….See if i care. Once you have done this make more folders in this folder you made called thumbs and tmp, chmod them both to 777. To chmod you go: right click chmod/properties/get info…. one of the three. This makes the directories writeable, readable and executable; so you can upload and mangle your files up. Next make a file in this new directory called thumb.php. This will be both our workhorse and our html displayer. So, we have done 3 steps. Congrats!

Now lets open up thumb.php and add in the HTML code. This sets us up with an interface for our users to upload their shiney images.

File: Max Dimensions: (optional)

So i will explain. Line one states that this is a form. It gives it a name, says that the data is to be communicated via the POST gateway and that the encoding type allows files. The other fields are the file, which accepts user input of files, max dimensions and a nice button to click to upload the information.

Next lets get onto some PHP stuff.

In this tutorial we will make a thumbnailing script using PHP. The script will allow your users to upload their images using a html form, and then be shown the thumbnail and a link to the file on completion. Also the user will be able to specify a max height or width if they want to.

Demo: http://www.jotlab.com/thumbtutorial

*Thats right you can host images on my website. But i have edited my code to make the maximum size no greater than 300 pixels*

So start off with. Make a directory on your webserver, call it whatever you want….See if i care. Once you have done this make more folders in this folder you made called thumbs and tmp, chmod them both to 777. To chmod you go: right click chmod/properties/get info…. one of the three. This makes the directories writeable, readable and executable; so you can upload and mangle your files up. Next make a file in this new directory called thumb.php. This will be both our workhorse and our html displayer. So, we have done 3 steps. Congrats!

Now lets open up thumb.php and add in the HTML code. This sets us up with an interface for our users to upload their shiney images.

File: Max Dimensions: (optional)

So i will explain. Line one states that this is a form. It gives it a name, says that the data is to be communicated via the POST gateway and that the encoding type allows files. The other fields are the file, which accepts user input of files, max dimensions and a nice button to click to upload the information.

Next lets get onto some PHP stuff.

Posted by VoiDeT

Categorised under PHP
Bookmark the permalink or leave a trackback.

7 Comments

  1. paparanch

    i don’t whats the problem with this because when i uploaded a gif file…its not animating anymore…why?

    June 16, 2008 @ 2:21 am
  2. pouria

    hi :)
    i recive this error with every kind of images :
    File is not an image! Don’t waste my time!

    so whats the problem?

    August 7, 2008 @ 8:29 pm
  3. That’s cool. I test it and it really Great!!

    October 8, 2008 @ 1:15 pm
  4. rcarlos3

    i have the same problem as “pouria”,

    with FF its ok, but with IE it doesnt accept the imagees..

    whats the problem?

    February 19, 2009 @ 6:16 am
  5. ehi

    can you tell me how i can make a script that will list the uploaded image on a page for other people to use because the page is for site link back images

    March 28, 2009 @ 9:24 am
  6. VoiDeT

    Either use a database to reference to the files, or write a directory listing script! :) Plenty of them out there! My other tutorial shows you how to insert into a database also! Thank you

    March 28, 2009 @ 12:45 pm
  7. great work :D

    April 15, 2009 @ 9:05 pm

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

or