I will cover uploading and renaming file, limiting file size, restricting file types and form validation.
To start with create the new file and call it upload.php.
Open our new file and in between the <body> tags type the following:
<form action="" method="post" enctype="multipart/form-data" name="frm_upload" id="frm_upload">
<table border="0" cellspacing="0" cellpadding="0" id="tbl_upload">
<tr>
<th scope="row"><label for="frmname">Full name:</label></th>
<td><input type="text" name="frmname" id="frmname" class="frmfld" /></td>
</tr>
<tr>
<th scope="row"><label for="frmfile">File:</label></th>
<td><input name="frmfile" type="file" id="frmfile" size="30" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td>
<label for="btn" id="sbm">
<input type="submit" name="btn" id="btn" value="Upload" />
</label>
</td>
</tr>
</table>
</form>
I have already prepared some styling for our form – copy and paste the following code within the header of your page – right before the closing </head> tag:
<style type="text/css">
<!--
body {
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#444;
}
#frm_upload, #tbl_upload, #btn, #sbm {
margin:0px;
padding:0px;
}
#tbl_upload {
border-top:solid 1px #aaa;
border-left:solid 1px #aaa;
}
#tbl_upload th, #tbl_upload td {
border-right:solid 1px #aaa;
border-bottom:solid 1px #aaa;
text-align:left;
vertical-align:top;
}
#tbl_upload th {
padding:3px 10px 0px 10px;
background-color:#f1f1f1;
font-weight:bold;
}
#tbl_upload td {
padding:3px;
}
.frmfld {
border:1px solid #aaa;
width:300px;
}
#btn, #sbm {
height:20px;
width:120px;
display:block;
}
#btn {
background-color:transparent;
border:none;
cursor:pointer;
}
#sbm {
border:solid 1px #aaa;
background:url(button.gif) repeat-x 0px 50%;
}
.warning {
color:#990000;
font-weight:bold;
}
-->
</style>
Also – download this image which will be used as a background graphic for our button and place it in the same directory where your upload.php file is.
If you test your page in the browser, you should see something like in Fig. 01.
Fig. 01
Go back to your file and under our form type:
<pre>
<?php
if (array_key_exists('btn', $_POST)) {
print_r($_FILES);
}
?>
</pre>
What this code does is it´s checking if Upload button has been pressed:
if (array_key_exists('btn', $_POST)) – if this condition is true then it displays the result of the file field: print_r($_FILES);
Now test our page in the browser. Browse for file and click the Upload button.
What you will see under the form is the multidimentional array (Fig. 02).
Fig. 02
The name of the top level array will be the same as the name our form´s file field frmfile.
The frmfile subarray consists of the following elements:
- name – represents the name of the file
- type – represents the file type (MIME)
- tmp_name – represents the temporary location and name assigned to the file when uploading
- error – displays the error number (0 means that there was no error)
- size – displays the file size in bytes
Now let´s try to understand what some of these elements mean and what other values we could come across.
name
It is just the name of the file which we are uploading – if for instance file name is flower.jpg then this is what will be assigned to this element.
type
It represents the MIME file type. The full list of MIME file types can be found here: http://www.w3schools.com/media/media_mimeref.asp
tmp_name
This is the path to the temporary folder and the temporary name of the file – when the file is uploaded, it first goes to the temporary folder – but if it´s not processed instantly, PHP discards it immediately so you won´t be able to find it there.
error
Displays the error number. The diagram below shows all possible errors:
| 0 | Indicates that there was no errors and file has been uploaded successfully |
|---|---|
| 1 | Indicates that the file exceeds the maximum file size defined in php.ini. If you would like to change the maximum file size, you need to open your php.ini file, identify the line which reads: upload_max_filesize = 2M and change the value from 2M (2MB) to whatever you need |
| 2 | Indicates that the maximum file size defined manually, within an on page script has been exceeded |
| 3 | Indicates that file has only been uploaded partially |
| 4 | Indicates that the file hasn´t been specified (empty file field) |
| 5 | Not defined yet |
| 6 | Indicates that there´s no temporary folder |
| 7 | Indicates that the file cannot be written to the disk |
size
Shows the size of the file in bytes.
Uploading file
Now it´s time to upload some files.
First go to your site´s root folder and create the new folder called uploads.
Also, make sure that the folder has writing permissions.
In our upload.php file type the following code before the DOCTYPE declaration:
<?php
if (array_key_exists('btn', $_POST)) {
// define new constant which contains the path to the upload folder
define('UPL_FLD','uploads/');
// move file to the 'uploads' folder
move_uploaded_file($_FILES['frmfile']['tmp_name'],UPL_FLD.$_FILES['frmfile']['name']);
}
?>
The first line of this code checks if Upload button has been clicked array_key_exists(‘btn’, $_POST)
and if this condition is true it creates the constant which stores the path to the upload file (remember to place the closing forward slash at the end of the path).
Next the function move_uploaded_file() moves the file form the temporary location $_FILES['frmfile']['tmp_name'] to the uploads folder UPL_FLD.$_FILES['frmfile']['name'].
You can now test your file in the browser and check the uploads folder – you should have your selected file copied to this folder.
In the next section I´m explaining how to rename the file during the uploading process.
discuss this topic to forum
