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

Meta: April 08th 2008 // PHP // 13,083 views

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.

<form enctype="multipart/form-data" method="post">
	File:
<input name="srcimage" type="file" />
	Max Dimensions:
<input name="maxdimensions" type="text" /> (optional)
<input name="submit" type="submit" value="upload" />
</form>

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.

<form enctype="multipart/form-data" method="post">
	File:
<input name="srcimage" type="file" />
	Max Dimensions:
<input name="maxdimensions" type="text" /> (optional)
<input name="submit" type="submit" value="upload" />
</form>

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.

Pages: 1 2 3 4 5 6 7

WeDecal.com

Postscript: Leave A Comment // Subscribe (RSS Feed)

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

// 7 comments so far.

  1. paparanch // June 16th 2008

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

  2. pouria // August 07th 2008

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

    so whats the problem?

  3. sohn // October 08th 2008

    That’s cool. I test it and it really Great!!

  4. rcarlos3 // February 19th 2009

    i have the same problem as “pouria”,

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

    whats the problem?

  5. ehi // March 28th 2009

    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

  6. VoiDeT // March 28th 2009

    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

  7. Sudhendu // April 15th 2009

    great work :D

Who Are You?

Your Email Address

Your Website

:D :) :o :eek: :( :lol: :wink: :arrow: :idea: :?: :!: :evil: :p

You can follow any responses to this entry via its RSS comments feed. You may also leave a trackback by clicking this link.