Create your own Image UploaderIntroduction
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://www.dalehay.com/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. |
