[ads1]File uploads has now become an integral part of many, if not all social apps (both web apps and mobile apps).<\/p>\n
The ability to view, upload and share pictures, videos and other media types are components of a viral social app. For this singular reason most web masters and app developers incorporate file uploads into the social apps they develop.
\n
\n
\n
\n
\n
\n
\n[ulp id=’8njY7i2QRy6sg8pg’]
\n
\nFile uploads are also used to collect needed materials from users. File uploads are used in quite a number of different applications (too numerous to mention here). How to add a file upload system into a web app is now an important skill every (PHP) web developer should possess. In this example we are going to learn how to add a file upload mechanism to a website or web app.
\nFor this example we will use:<\/p>\n
File uploads are created with the HTML HTML forms are created with the opening An HTML form contains an action and a method attribute. The \u201caction\u201d attribute in a form tag tells the form where to submit its content while the \u201cmethod\u201d attribute lets the form know which method to use when transmitting its content. The method attribute can either be GET or POST.<\/p>\n Some attributes of the GET method are:<\/p>\n Some attributes of the POST method are:<\/p>\n We have learnt how to create HTML forms and how data in HTML forms are sent to the server. How do we write a script that handles and manipulates the form data when it arrives at the server? When the form data gets to the server the script \u201cindex.php\u201d is called. The script then needs to read the form data and act on it. We use $_GET and $_POST superglobal arrays to read data sent to the server. For example we have created a form using the GET method and the form contains a text field index.html<\/em><\/span><\/p>\n The script above is a typical example of an HTML form. I particularly love it because it features different elements that can be used in an html form.<\/p>\n To get started with file uploads, make sure PHP is configured to allow file uploads. In your php.ini file search for file_upload and set it to on. If you dont know how to locate your php.ini file just create a script and add the line below to it.<\/p>\n The above code prints out the PHP information for your server. Check the section named “loaded configuration file” you will see the path to the php.ini file.<\/p>\n index.html<\/em><\/span><\/p>\n In the HTML file above, we create an HTML form that allows users to upload and submit a file. The HTML file displays an upload file button and a submit button.<\/p>\n Some rules that must be followed for the HTML form above to work are:<\/p>\n Other things to take cognisance of are:<\/p>\n The form above sends the data inputed by the user to a script named “file.php”<\/p>\n file.php <\/em><\/span><\/p>\n The script above handles data sent from the file upload input.<\/p>\n In this example we learnt about file uploads, and how to handle file upload data with PHP. We also took a very short crash course into HTML forms.<\/p>\ninput<\/code> tag which is always inside a form <\/code> tag. We are going to get started by taking a short crash course into HTML forms (what they are and how to effectively use them) if you are already familar with HTML form please skip the next section.<\/p>\n1.1 HTML Forms<\/h3>\n
<form> <\/code>and closing <form>\u00a0<\/code>tag. The form tag defines an html form. Form elements are different, they can be text fields, checkboxes, radio buttons, submit buttons, and more.<\/p>\n\n
\n
\nFirst of all, the form action attribute needs to contain the URL of the PHP script that will handle the form. e.g < form action=\"index.php\" method =\"post\" >.\u00a0<\/code>Next we need to create the form handler ( e.g index.php ).<\/p>\n
\n$_GET: Contains a list of all the field names and values sent by a form using the GET method.
\n$_POST: Contains a list of all the field names and values sent by a form using the POST method.<\/p>\n
\n< input type=text name=text >.<\/code>
\nWe can access the data in this form field by using the $_GET superglobal array
\n$text=$_GET[\"text\"];<\/code><\/p>\n \r\n<?php\r\n<!DOCTYPE html> \r\n <html lang=\"en\"> \r\n <head> \r\n <title>Programming Club Membership Form<\/title> \r\n<\/head>\r\n <body> \r\n <h1> Programming Club Membership Form <\/h1>\r\n <p>Thanks for choosing to join our Programming Language Club.<\/p>\r\n\t\r\n\t\r\n <form action=index.php method=post> \r\n\t<div style=\"width: 30em;\" >\r\n <label for=firstName> First name <\/label> <br> <input type=text name=firstName id=firstName required \/> <br> <br>\r\n <label for=lastName> Last name <\/label> <br> <input type=text name=lastName id=lastName required\/> <br> <br>\r\n <label for=password1> Choose a password <\/label> <br> <input type=password name=password1 id=password1 required \/> <br> <br> \r\n\t\t<label for=password2> Retype password <\/label><br> <input type=password name=password2 id=password2 required \/> <br> <br>\r\n <label for=genderMale> Are you male... <\/label> <input type=radio name=gender id=genderMale value=Male \/> \r\n\t\t<label for=genderFemale>...or female?<\/label> <input type=radio name=gender id=genderFemale value=Female checked \/> <br> <br>\r\n <label for=favoriteWidget> What's your favorite programming language? <\/label> <select name=favoriteWidget id=favoriteWidget size=1> \r\n\t\t<option value=java> Java <\/option> \r\n\t\t<option value=php> PHP <\/option> \r\n\t\t<option value=phyton> PHYTON <\/option> \r\n\t\t<\/select> <br> <br>\r\n <label for=newsletter> Do you want to receive our newsletter? <\/label> \r\n\t\t<input type=checkbox name=newsletter id=newsletter value=yes \/> <br> <br>\r\n <label for=comments> Any comments? <\/label> \r\n\t\t<textarea name=comments id=comments rows=4 cols=50> <\/textarea>\r\n <div style=\u201dclear: both;\u201d> \r\n\t<input type=submit name=submitButton id=submitButton value=Send Details \/> \r\n\t<input type=reset name=resetButton id=resetButton value=\"Reset Form\" style=\"margin-right: 20px;\" \/> \r\n\t<\/div> \r\n\t<\/div>\r\n\t\r\n\t<\/form>\r\n <\/body> \r\n<\/html>\r\n<\/pre>\n
1.2 PHP File Upload<\/h3>\n
<?php\r\n\r\necho phpinfo();\r\n\r\n?>\r\n\r\n<\/pre>\n
\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<form action =\"file.php\" method =\"post\" enctype =\"multipart\/form-data\">\r\n<label for=firstName> Select the image to upload: <\/label> <br> <br>\r\n<input type=\"file\" name=\"fileToUpload\" id =\"fileToUpload\"> <br> <br>\r\n<input type=\"submit\" value =\"Upload Image\" name=\"submit\"> <br>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\n
\nWithout the requirements above, the file upload will not work.<\/li>\n<\/ul>\n\n
type=\"file\" <\/code>attribute of the tag shows the input field as a file-select control, with a “Browse” button next to the input control<\/li>\n<\/ul>\n \r\n<?php\r\n$save_dir =\r\n\"uploads\/\" ;\r\n$save_file = $save_dir . basename( $_FILES\r\n[ \"fileToUpload\" ][ \"name\" ]);\r\n$uploadOk = 1;\r\n$fileType = pathinfo($save_file,PATHINFO_EXTENSION);\r\n\/\/ Check if image file is a actual image or a fake image\r\nif ( isset($_POST\r\n[ \"submit\" ])) {\r\n$check = getimagesize( $_FILES\r\n[ \"fileToUpload\" ][ \"tmp_name\" ]);\r\nif ($check !== false) {\/\/returned a valid image\r\necho \"File is a valid image - \" . $check[ \"mime\" ] . \". <br>\" ;\r\n$isuploadok =true ;\r\n} else {\/\/whatever was returned is not a valid image\r\necho \"File is not an image. <br>\" ;\r\n$isuploadok = false;\r\n}\r\n}\r\n\/\/ Check if file already exists\r\nif (file_exists($save_file)) {\r\necho \"Sorry, file already exists. <br>\" ;\/\/the uploaded file already exists on the server\r\n$isuploadok = false;\/\/define error code\r\n}\r\n\/\/ Check file size\r\nif ($_FILES\r\n[ \"fileToUpload\" ][ \"size\" ] > 500000 ) {\/\/get the file size and check if it too large\r\necho \"Sorry, your file is too large. <br>\" ;\r\n$isuploadok = false;\r\n}\r\n\/\/ Allow only some certain file formats(jpg, png, jpeg and gif)\r\nif ($fileType !=\r\n\"jpg\" && $fileType != \"png\" && $fileType !=\r\n\"jpeg\"\r\n&& $fileType !=\r\n\"gif\" ) {\r\necho \"Sorry, only JPG, JPEG, PNG & GIF files are allowed. <br>\" ;\r\n$isuploadok =false;\r\n}\r\n\/\/ \r\nif (!$isuploadok) {\/\/ this upload is not ok there is an error associated with it\r\necho \"Sorry, your file was not uploaded. <br>\" ;\r\n\/\/ if everything is ok, try to upload file\r\n} else {\/\/upload very ok\r\nif (move_uploaded_file( $_FILES\r\n[ \"fileToUpload\" ][ \"tmp_name\" ], $save_file)) {\/\/try to move file\r\necho \"The file \" . basename( $_FILES\r\n[ \"fileToUpload\" ][ \"name\" ]). \" has been uploaded. <br>\" ;\r\n} else {\/\/file was not moved successfully\r\necho \"Sorry, there was an error uploading your file. <br>\";\r\n}\r\n}\r\n?>\r\n\r\n<\/pre>\n2. Summary<\/h2>\n
3. Download the source code<\/h2>\n