Image Upload

Category: PHP
Reviewed by: enhance   
Reviewed on: May 12 2006
» Discuss this topic (1 Posts)

The internet is full of images of all sizes and before a user can share them throughout the various forums, personal websites, and communities they need to be stored on a web server. This tutorial will take you through the quick and easy steps of creating an upload system for users around the world to use.

To upload a file to your server the user will need to be able to browse their computer for the image they want. Luckily for you all you need for this to work is a simple html input.

<input type="file" name="userimage" />

There are 3 important parts to the above input. First, is the input type. To allow users to browse their computer for an image you need to have the type set as file. Second, is the inputs name. The name "userimage" allows you to call upon this input later within a php script. This will be explained in more detail on the second page. Lastly, in accordance with w3 XHTML standards all tags must be closed. In the case of inputs all you need to add is a simply forward-slash (/) before the ">".

Now that you have the right input down your going to need to create a form to encompass it. There are 4 important parts to the form which are the name, method, action, and enctype of which the name and action can be changed to suit your needs. The method and enctype will need to stay the same.

<form name="uform" method="post" action="userupload.php" enctype="multipart/form-data">
In the example above the form method is set to post. This is the preferred method to use when sending image data as it is large in size and will not be seen by the user.

The form action is set to "userupload.php". This can be changed as long as you place the php code on the next page in that same file.

The form encoding type (enctype) is set as "multipart/form-data". This encoding type is used for forms that contain files, binary, and non-ascii data.

Now combine your input and your form and you should get the following complete html form.

<form name="uform" method="post" action="userupload.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input type="file" name="userimage" />
<input type="submit" name="submit" value="Upload" />
</form>

Notice in the above code the addition of a hidden input named "MAX_FILE_SIZE" with a value of 30000kb. This is a secure way of blocking images that are to large without the user having to go through the long upload process.

On the next page you will be taken through a few short steps on getting the users file uploaded to your server.