22nd Mar 2008 08:09pm
7,479 views | 22 comments
Flattr this

Introduction
So you want to create your own image uploader?? Maybe for a image hosting website? If you are unsure what I'm on about then it's simple... a visitor comes onto your website, uploads an image through a form then gets told where it's located so they can use it on their own site.

What You Need
- A Web Server
- PHP
- Notepad (or a PHP Editor)

Part 1
Ok so we're going to have 2 files for our project. A 'index.php' and 'upload.php' file. The 'index.php' file will have the form on it which will allow the visitor to upload a file through a form and then the 'upload.php' file will process the file that has been uploaded and show the results.

Part 2
So lets start with the 'index.php' file.. I am not going to be doing the styling of the site, just the coding of the main script.. you can design what you like. So first of all we need to make the "form" for people to upload the images. To do that we need to firstly make a file called 'index.php' and type in:

<form action="upload.php" method="POST" enctype="multipart/form-data">
The action bit tells the form where to go once the submit button is pressed. The method bit tells us how to send the data, either GET (through the browsers varibles) or POST (through your hosts temporary file) and enctype tells the form what type of data is going through.

Next we need to make the box where people can select an image:
<input type="file" name="image">
The type bit tells your page what type of box it'll be (either text, password, button, submit, reset or file) with it as file you will see a "browse" button added at the end of it. The name of the form is important as that will be passed through to the next page.

Finally we just need to add the last two bits, which is the submit button (which we'll put the text on the button as "Upload Image") and then closing the form.
<input type="submit" value="Upload Image">
</form>
The type on the button is submit which tells your page that it will send the information through when clicked and the value is what text is to be shown on the button, which we have told it to be upload image. Then the backslash-form is just the ending of the form.

Part 3
Now for the final bit which will be all the PHP that is used to send the image from a visitors computer to your website - create and save this file as 'upload.php'.

<?php
// Turn the image that is being uploaded into a varible.
$imagename = $_FILES['image']['name'];

// Copies the image from your web servers temporary file to your web server
copy($_FILES['image']['tmp_name'], "./hostedimages/$imagename");

// Send out a message afterwards to say it has been uploaded
echo "Your image has been uploaded and can be viewed here: <br>";
echo "http://dalehay.me/hostedimages/$imagename <hr>";
echo "<b>Preview:</b><br><img src='./hostedimages/$imagename'>";
?>
Pretty small output however it works and this is how. On the 'index.php' page we called the input box 'image' so when the file gets sent to your 'upload.php' page it has the global name of 'image' - in this script we use the extra bits called 'name' (the exact file name of the image [eg; MyCar.jpg]) and 'tmp_name' (which is as a temporary file [eg; file0001.tmp]). The copy() PHP tag has two properties.. the first is the location of the temporary file (hence why we used ['tmp_name']) and then the second property is where the image is being sent to (in our example it's to a folder called 'hostedimages' and after you see we are calling the varible $imagename which is just reading the ['name'] value of the image).

Part 4
Now that is done, all you need to do now is upload both files and create a directory on your server called 'hostedimages' (or whatever you want to have it as) then CHMOD that folder to 777 (You need to CHMOD it otherwise nothing can be sent to that folder). Then try it out... it work.

Problems
Because this is a small quick and dirty method of uploading images, visitors can still upload other files beside images - so maybe expand on this by using the ['type'] value in the 'upload.php' page. Another problem is if a person uploads a file called 'cat.jpg' and then two days later another person uploads a file called 'cat.jpg' it will overwrite it and remove the previous image - so maybe get the file name to start with time() then the filename.

 

Tweet ThisShare On FacebookShare On Google ReaderAdd To Del.icio.usShare On DiggShare On RedditShare On LinkedInShare On StumbleUpon

Comments

24th Mar 2008 23:28

how do you chmod 777 ?

By


24th Mar 2008 23:34

how do you chmod 777 ?

By


25th Mar 2008 18:54

If you use an FTP program then right click the destination folder and select CHMOD. Then tick all the boxes to total it all to 777 (or 0777 on some things)
By Dale Hay


15th Apr 2008 20:10

Warning: copy(./hostedimages/semnatura1rj9.jpg) [function.copy]: failed to open stream: No such file or directory in /home/respawn/public_html/imghost/upload.php on line 6
Your image has been uploaded and can be viewed here:
http://www.dalehay.com/hostedimages/semnatura1rj9.jpg
By SuSp3k7uL


15th Apr 2008 20:59

SuSp3k7uL - You made a directory called "hostedimages" ??
By Dale Hay


18th Apr 2008 10:50

chmod - tis a linux thing. if your using windows, shouldnt matter.
By Pete


18th Apr 2008 21:31

On Windows then right clicking the folder and going to Permissions should be the alternative to CHMOD.
By Dale Hay


9th Aug 2008 23:12

you can chmod by going into your favorite ftp client right clicking on the file or folder and eithe rclicking "CHMOD" or "ANTRABUTES" and you will see 9 boxes and a place to type in numbers... every number was so many boxes it ticks!
By kyle


9th Aug 2008 23:26

Some FTP clients have 12 boxes - allowing the number to be 0777, however I never fiddle with the first number, only the last three.
By Dale Hay


10th Aug 2008 17:26

How would you use the time() function, possibly also the date() function in this script

Thanks
By Martyn Breckenridge


10th Aug 2008 17:49

This script only uploads pictures, but if you wanted it to record what time they uploaded then I'd say after the "copy()" function make a connection to the database and get it to save the image name along with the "time()" function too. Then when viewing the image, use "date("jS F Y h:i",$time)" to get the date.
By Dale Hay


10th Aug 2008 18:03

I was actually referring to the part you wrote under problems:

"Another problem is if a person uploads a file called 'cat.jpg' and then two days later another person uploads a file called 'cat.jpg' it will overwrite it and remove the previous image - so maybe get the file name to start with time() then the filename."

I was wondering how to do that,

thanks,

martyn
By Martyn Breckenridge


10th Aug 2008 19:36

Ahh,

To do that, then instead of having:
copy($_FILES['image']['tmp_name'], "./hostedimages/$imagename");

Write it like this:
copy($_FILES['image']['tmp_name'], "./hostedimages/".time()."$imagename");

That would stop things getting overwritten. The only chance of something being overwritten is if someone uploads a file of the same name at exactly the same second - which I don't even think MySpace would have that problem. :)
By Dale Hay


10th Aug 2008 20:17

Thanks dale, got the script working perfectly.

do you mind if i have a link back to your site on mine, seeing as you wrote more or less all the code i used?

Martyn
By Martyn Breckenridge


10th Aug 2008 21:53

Yeah, feel free to link back if you want.
By Dale Hay


30th Aug 2008 23:55

Hi dale, I really like your tutorials because they're easy to follow and understand. I got two things on mind that I'm very curious about.

1: How can I expand this script and make it so I can upload more than 1 picture at a time?

2: I would like to create something like ImageShack just for learning purposes later on in the future. And I would like to know if services like ImageShack upload images into a database or like normal folders as shown here?
By dim


31st Aug 2008 01:57

Hi dim,

To allow this form to upload more than one image at a time you will need to start using Arrays. At the moment I do not have an example of it but may expand on this tutorial to show it.

Secondly, I believe ImageShack would use folders and have the information linked from the database as storing the images in a database would be a big hefty thing.
By Dale Hay


30th Sep 2008 09:39

Im doing exact as it says but i dont get it work, it dosent give me any messages, just that it wont upload the picture
By gnutt3n


3rd Jan 2009 05:02

very informative and well defined the programs .

very useful.continue to develope this in future
By sreeni


5th Jan 2009 20:45

Don't know if i've already told you but i've got my image uploader up and running, you can get it at http://uploader.dumpyourload.co.uk

Tell me what you think of it
By Martyn Breckenridge


10th Jan 2009 06:35

the pic is not being uploaded to
hostedimages though i have created a folder named hostedimages

please help
By Vinit Nalhe


19th Feb 2013 20:25

Hello people!!!!))))XlurewXa
By XlurewXa


Post your comment...

Your Name:

Your Email:

Your Comment:

Are You Human?

Tick this box to confirm you're not a bot.

  • © Dale Hay, 2005 - 2016