Web Design Forum

geim · 01-14-2007

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.

U can see demo in http://gettingzone.com (upload picture and file = ajax + php + javascripts)

hashimi · 08-08-2007

Thanks for this Tutorial, Waiting the embellished one :)

Your first tutorial was really Nice and understandable...

Dimitry · 08-08-2007

Your form most likely won't upload files, since you forgot to set the appropriate content-type. :)

More on the topic:
http://www.w3schools.com/php/php_file_upload.asp

hashimi · 08-08-2007

it is just a tutorial not an example :)

Thanks for the Link

Dimitry · 08-09-2007

Sorry. My words were a bit vague. :)
What I wanted to say, is don't forget

Code:

enctype="multipart/form-data"

It is quite mandatory. Else, most end up on forums asking "why upload doesn't work".

Web Design Forum

Web Design and Web Development Forum

LATEST POSTS

FORUM STATISTICS

PARTNER SITES

LinkBack

Thread Tools

Rate This Thread

Display

php : File Upload Form

Re: php : File Upload Form

Re: php : File Upload Form

Re: php : File Upload Form

Re: php : File Upload Form

Similar Threads

PHP Upload