Building File Uploaders with PHP 5 - Building a simple file uploading form (
Page 3 of 4 )
As I explained in the previous section, the first step required to perform a file upload with PHP consists of building a basic online form, which lets users select a target file and then upload it to the server's temporary directory.
Having described how the file uploading online form is going to function, I'm going to construct a basic web page that includes the web form in question. This way I will provide users with a basic front-end that allows them to upload files to a web server in a simple way.
That being said, here's the definition of the web document that contains the aforementioned file uploading form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Uploading files with PHP</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
form{
display: inline;
}
#formcontainer{
width: 50%;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #666;
}
</style>
</head>
<body>
<h1>Uploading files with PHP</h1>
<div id="formcontainer">
<form enctype="multipart/form-data" action="upload_file.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="20000" />
<p>File to upload <input name="userfile" type="file" />
<input type="submit" name="send" value="Upload File" /></p>
</form>
</div>
</body>
</html>
As you can see, the structure of the above web page is really simple, since the most important element that it contains is the online form that I mentioned earlier, which will come in handy when uploading a selected file to the web server.
Speaking more specifically, there are two relevant details we need to highlight here with reference to how the previous web form has been coded. The first one is its "enctype" attribute, which must have a value of "multipart/form-data" so the web server will be able to correctly process the corresponding form input and upload the selected file into a temporary directory.
The second one is the MAX_FILE_SIZE hidden field. The reason for including this additional form element is to establish a maximum size in bytes for the file being uploaded (in this case, I specified a limit of 20,000 bytes). As you'll see later on, once the pertinent file uploading form has been submitted, it's possible to check the value of this field with PHP and reject all the files that exceed this size. Not too complex to grasp, is it?
So far, so good. At this stage, I've shown you how to build a basic web form that allows users to browse files in their client machines and upload one of the them to a temporary directory on the web server. What's the next step?
Well, here's where things become really interesting! As you may have noticed, the previous online form points its "action" attribute to a file called "upload_file.php," meaning that this one will be responsible for moving the file that was just uploaded to a predefined directory in the server. This way it completes the file uploading process.
To see the logic that will be implemented with this PHP file, please go ahead and read the following section. It's only one click away.
/ 9 
