Part III: Start with Simple Stuff
Chapter 10: Uploading Files to Your Web Site
Overview
If you need a quick interface for uploading files to your Web site from a remote location, you can create a two-step form and script interface with PHP. In this chapter, you'll learn how to do the following:
• Create an HTML form for file uploads
• Create a PHP script to handle file uploads Check Your php.ini File
Before you start uploading files, check a few values in your php.ini file. Look for this section of text:
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;
; Whether to allow HTTP file uploads.
file_uploads = On
; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
;upload_tmp_dir =
; Maximum allowed size for uploaded files.
upload_max_filesize = 2M
To ensure the file upload process will work smoothly, make the following modifications:
1. Uncomment the upload_tmp_dir line by deleting the initial semicolon.
2. Enter a directory name after the = for upload_tmp_dir.
3. If you want to allow larger uploads, change the number of bytes for upload_max_filesize.
For example, on a Windows system, this section of the php.ini file may look like
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;
; Whether to allow HTTP file uploads.
file_uploads = On
; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
upload_tmp_dir = /Windows/temp
; Maximum allowed size for uploaded files.
upload_max_filesize = 2M
If you are not using Windows, you won't have to modify the value for
upload_tmp_dir, as long as you want files to be placed in /tmp (the default).
Understanding the Process
The process of uploading a file to a Web server through an HTML form interface puzzles a lot of people. Take a moment to understand the process you'll create in the following sections.
To start and finish this process, you need the following:
• An HTML form
• A file to upload
• A place to put the file
• A script to put it there
The process itself goes something like this:
1. The user accesses the HTML form and sees a text field and the Browse button in his Web browser.
2. The user browses his hard drive for the file he wants to upload and then selects a file.
3. The full file path and file name appear in the text field.
4. The user clicks on the Submit button.
5. The selected file goes out, lands at the Web server, and sits around in a temporary directory.
6. The PHP script used in the form action checks that a file was sent and
executes a copy command on the temporary file to move it to a real directory on the Web server.
7. The PHP script confirms the action for the user.
Note The PHP user (the user under which PHP runs, such as "nobody" or
"www" or "joe") must have write permissions in the temporary directory as well as the target directory for the file.
8. Start with simply creating the HTML form interface in the next section.
Creating the Form
Start out by creating a one-field form. You can create a form to upload as many files as you like after you get this sequence to work with one file.
1. Open a new file in your text editor and type the following HTML:
2. <HTML>
3. <HEAD>
4. <TITLE>Upload a File</TITLE>
5. </HEAD>
6. <BODY>
7. <H1>Upload a File</H1>
8. Begin your form. Assume that the method is POST and the action is a script called do_upload.php. Because you'll be sending more than just text, use the ENCTYPE attribute.
9. <FORM METHOD="POST" ACTION=" do_upload.php" ENCTYPE="multipart/
10. form-data">
11. Create an input field for the file with a text label. Assume that you'll be uploading an image file, and name the input field img1:
12. <p><strong>File to Upload:</strong><br>
13. <INPUT TYPE="file" NAME="img1" SIZE="30"></P>
14.
Note The TYPE="file" attribute in the form field will display an input field with a Browse button. The Browse button launches a file manager through which you select the file to upload.
15. Add a submit button, then close your form and add some more HTML so that the document is valid:
16. <P><INPUT TYPE="submit" NAME="submit" VALUE="Upload File"></P>
17. </FORM>
18. </BODY>
19. </HTML>
20. Save the file with the name upload_form.html and place this file in the document root of your Web server.
21. Open your Web browser and type http://127.0.0.1/upload_form.html
In the next section, you'll create the script that handles the file upload.
Creating the Upload Script
Take a moment to commit the following list to memory—it contains the variables that are automatically placed in the $_FILES superglobal after a successful file upload.
The base of img1 comes from the name of the input field in the original form.
• $_FILES[$img1] [tmp_name]. The value refers to the temporary file on the Web server.
• $_FILES[img1] [name]. The value is the actual name of the file that was uploaded. For example, if the name of the file was me.jpg, the value of
$_FILES[img1] [name] is me.jpg.
• $_FILES [img1] [size]. The size of the uploaded file in bytes
• $_FILES [img1] [type]. The mime type of the uploaded file, such as image/jpg The goal of this script is to take the uploaded file and copy it to the document root of the Web server and return a confirmation to the user containing values for all the variables in the preceding list.
1. Open a new file in your text editor and start a PHP block:
2. <?
3. Create an if…else statement that checks for a value in $_FILES[img1].
4. if ($_FILES[img1] != "") {
5. If $_FILES [img1] is not empty, execute the copy function. Use @ before the function name to suppress warnings, and use the die() function to cause the script to end and a message to display if the copy() function fails.
6. @copy($_FILES[img1][tmp_name], "/usr/local/bin/apache_1.3.26/
7. htdocs/".$_FILES[img1][name]) or die("Couldn't copy the file.");
8.
Note If the document root of your Web server is not
/usr/local/bin/apache_1.3.26/htdocs/ as shown in step 3, change the path to match your own system. For example, a Windows user might use /Apache/htdocs/.
9. Continue the else statement to handle the lack of a file for upload:
10. } else {
11. die("No input file specified");
12. Close the if…else statement, then close your PHP block:
13. } 14. ?>
15. Add this HTML:
16. <HTML>
17. <HEAD>
18. <TITLE>Successful File Upload</TITLE>
19. </HEAD>
20. <BODY>
21. <H1>Success!</H1>
22.
23. Mingle HTML and PHP, printing a line that displays values for the various elements of the uploaded file (name, size, type):
24. <P>You sent: <? echo $_FILES[img1][name]; ?>, a <? echo 25. $_FILES[img1][size]; ?> byte file with a mime type of <? echo 26. $_FILES[img1][type]; ?>.</P>
27. Add some more HTML so that the document is valid:
28. </BODY>
29. </HTML>
30. Save the file with the name do_upload.php.
In the next section, you'll finally get to upload a file!
Uploading a File Using Your Form and Script
This is the moment of truth, where you hold your breath and test the script.
1. Open your Web browser and type http://127.0.0.1/upload_form.html 2. Use the Browse button to locate a file you want to upload.
Note This example uses a file on my own machine, so the figures won't look quite the same as your results.
3. 4. Click on the Upload File button.
The results screen should appear, providing information about the file you just uploaded.
Note Only allow your file upload script to be used by yourself or other trusted sources, unless you limit the types of files you wish to upload by
checking the file type before copying to the system.