Friday, July 1, 2011

Upload files using a HTML form

This tutorial explains the basics of uploading images or files to your server using a HTML form and the PHP function copy. I haven't explained form validation or file checking - I'll go into further detail on that in future tutorials. To kick things off, you'll need a HTML form:
uploadform.htm

here are two things to note about the HTML code. Firstly, I've defined the attribute enctype="multipart/form-data" in the form tag. This encodes your form data differently to normal, allowing you to submit files. Secondly, I've used the input element with type = "file". The browser renders this as follows:

Note the 'Browse...' button. Clicking this opens a window allowing the user to browse their local computer and select a file (go on, try it). Once they've selected a file and clicked 'Open', the window closes and the file's local path appears in the form (eg - "C:\My Documents\button.gif"). Clicking 'Upload Image' (eg - the submit button) sends the form results, including the local file, to uploadresults.php for processing:
uploadresults.php
copy ($_FILES['Image']['tmp_name'], $_FILES['Image']['name']) or die ('Could not upload'); ?>
The uploaded image is stored on the server in a temporary location. You can reference it by using the global array $_FILES. There are several variables available:
  • $_FILES['file']['name']: name of the file
  • $_FILES['file']['type']: filetype of the uploaded file
  • $_FILES['file']['size']: size of the uploaded file (in bytes)
  • $_FILES['file']['tmp_name']: name for the temporary file stored on the server
  • $_FILES['file']['error']: an error code resulting from the file transfer
Once uploadresults.php has finished executing, the temporary file is deleted. You use the PHP functions copy or move_uploaded_file to store the file in a permanent location (in fact, our current webhost only allows move_uploaded_file). Copy and move_uploaded_file have two arguments - the first is the temporary location, the second is the final destination where you wish to save the file. In the example above, I saved the file in the same directory as uploadresults.php. If I wanted to save it in a subdirectory, I'd have used something like this:
copy ($_FILES['Image']['tmp_name'], "images/".$_FILES['Image']['name']) or die ('Could not upload'); ?>
IMPORTANT: be sure to turn on the write permissions of the directory where you're copying the files to or you may get a 'permission denied' or some similar error. Most FTP programs let you set the CHMOD for a directory - set it to 777 to give it write permissions.
So there you have it. There are checks you can perform on uploaded files to ensure they're the right size, filetype, etc. In fact, I'd strongly recommend you have some checks in place, particularly if your upload form is open to the public. For example, you can specify a maximum size of the uploaded file (which importantly kicks in before the file is uploaded). You can check the filetype to make sure it's a certain type. You can even resize images to create thumbnails on the fly. I'll cover all of these in future tutorials so stay tuned. :-)

No comments:

Post a Comment

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Note:
Please do not spam Spam comments will be deleted immediately upon my review.