Uploading Files

Why? By giving a user the option to upload a file you are creating an interactive page You can enable users have a greater web experience through these interactions You will enable the user to have greater control over the webpage.

Introduction You will need two pages to create this function A html page with a form A php page with server side scripting (php and mySql)

HTML page

The most important part of this page is This page will allow the user to search for their image.

PHP page

What’s important with this page is The underlying code

The connection HTML page The user can browse for their image/file they wish to upload. When they have found the file they are to upload the file through a button. PHP page This page will contain the server side code which will process the upload function. This will upload the file into a specified folder (images folder) In this example this page also allows the user to enter data associated to the file. Submit

The form Please search for your employee's photograph before inserting other details

Dissecting the code : Opening form tag enctype=“multipart/form-data”: Specifies the type of data stored in the form action=“path/filename”: the file the form will go to next after form is submitted method=“post”: The location in which the data is encoded. ( How the data is being sent)

: A form input area. Allows user to enter data. type=“file”: This specifies the type of data being entered. For this example it is a file. name=“uploadFile”: The name of the form input. There can be many form inputs by giving each one a specific name you can target a particular input of data. Id=“uploadFile”: Class identification, for design purposes.

type=“submit”: A submit button name=“action”: The name of this particular form input value=“Upload file”: The text that appears on the submit button The closing form tag, indicates the end of the form.

Method: Get vs Post Get method will encode the data of a form within the URL. The data sent has to be for simple retrieval purposes. Post method will encode the data of a form within the body of a page. The post method can be used for complex form interactions such as uploading and storing files, sending an and etc

The PHP code <?php $target_path = "images/"; $target_path = $target_path. basename( $_FILES['uploadFile']['name']); if(move_uploaded_file($_FILES['uploadFile']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['uploadFile']['name']). " has been uploaded"; } else { echo "There was an error uploading the file, please try again!"; } ?>

PHP code dissected <?php: The opening php tag. PHP code always needs to be within an opening and closing php tag. $target_path = "images/"; A variable called $target_path. This variable will contain the images folder pathway

$target_path = $target_path. basename( $_FILES['uploadFile']['name']); Starget_path=$target_path: The same variable will equal itself in order to automatically update the contents information..basename: base name to a file. $_FILES: creates an array containing the file name of the uploaded file Note: Arrays “allow the programmer to store more than one value in a variable, whilst retaining a single reference.” [uploadFile’]: associated index from the form file input type. (The name of the form element on the HTML page) [‘name’]: associated index from the original file name. This name will reflect the original file name as stored on the local computer. (The name of the original file that is being uploaded)

if(move_uploaded_file($_FILES['uploadFile']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['uploadFile']['name']). " has been uploaded"; } else { echo "There was an error uploading the file, please try again!"; } ?> If statement: If the function move_uploaded_file; of array with (form element name) and temporary name to the folder path (images), has been completed then display “The file (filename) has been uploaded.” Otherwise Display “There was an error uploading the file, please try again!” End of if statement Closing of php tag

If statements If statements provide conditions that your webpage must meet in order to execute a particular function.