In previous parts of this series, we’ve discussed the basics of forms (see
parts three and
four) and we’ve introduced
the basics of file manipulation. Now we’re going to put this together,
throw a little spice into the mix, and create a form that will allow for a file
to be uploaded.
The Form
Let’s start with the form:
<html>
<head>
<title>File Upload Form</title>
</head>
<body>
This form allows you to upload a file to the server.<br>
<form action="getfile.php" method="post"><br>
Type (or select) Filename: <input type="file" name="uploadFile">
<input type="submit" value="Upload File">
</form>
</body>
</html>
OK! That’s a pretty basic form, but it’s going to get the job done!
Now let’s take a closer look at it.
First, notice that the action attribute of the form statement is going to
cause the php page "getfile.php" to be called to process this form when the
submit button is clicked. (Also notice that we’re using method="post",
which we discussed in part four)
Next, in the form is an input type="file" This provides a place
for a filename to be typed and a "Browse" button which can be used as an
alternative to typing the name, and opens up a dialog box which allows the user
to select the file they wish to upload. (Some browsers may provide a
slightly different appearance for the input type="file" but the effect is still
the same.)
Just to make things a little more self explanatory, we’ve changed the text on
the submit button to read "Upload File". That should be clear enough!
Processing the Form
Now we need to process the form, so we must create our "getfile.php" page.
Here we go:
<html>
<head>
<title>Process Uploaded File</title>
</head>
<body>
<?php
move_uploaded_file ($_FILES[’uploadFile’] [’tmp_name’],
"../uploads/{$_FILES[’uploadFile’]
[’name’]}")
?>
</body>
</html>
This is the basics of getting the job done; we’ll take a look at this first,
then embellish it a little to make it more user friendly. There’s quite a
lot of info to clarify about that one statement in there!
The statement uses the function "move_uploaded_file" which is a function
built in to PHP. When the file was uploaded, PHP created a temporary copy
of the file, and built an array containing information about the file.
$_FILES is that array.
The move_uploaded_files function takes two parameters, seen here contained in
parentheses and separated by a comma. The first parameter tells the
function where to get the file it is to move (copy), and the second tells it
where to put the copy.
In the first parameter, we need the name of the temporary file that PHP
created. To get that, we reference the $_FILES array with associative
indexes to the pieces of information we need. "Huh?" you say! Let me
explain further! The first associative index we need is to indicate which
file we are talking about — in our example here we only included one upload
file, but our form could have had more than one input type="file". To let
PHP know which one we are dealing with, we use the name of the input field on
the original form; in this case it was ‘uploadFile’. Next we refer to the
‘tmp_name’ associative index, which provides us with the name of the temporary
file PHP created.
In the second parameter we similarly use the $_FILES array associated with
our original input field name, but this time we reference the ‘name’ associative
index. This provides us with the original file name as it was on the
user’s computer. By using "../uploads/" along with this reference, we tell
the move_uploaded_file function to create a copy of the original file in a
directory called "uploads" within the website, and to name the file with its
original name.
Job done!
At least, we hope it is! Things can go wrong when computers are
involved, however. I know — that’s tough for you to believe, right?
<g> In the next part of this tutorial series, we’ll embellish this
example with tests for thing that can go wrong, code to handle those errors, and
code to let our user know what’s going on.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
