Upload file using PHP

Upload file using PHP

This is a simple tutorial to learn how to upload file using PHP with the help of HTML form. PHP makes it very easy, which is required in most of websites.

Upload file by user can be harmful to your website, because hackers can effect the data always upload file with some security and precautions like file size, file type, etc.

Steps to upload file using PHP

First we need a HTML form to upload file.

1. <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" enctype="multipart/form-data">
2. <p><input type="file" name="myfile"></p>
3. <p><input type="submit" name="submit" value="Upload files"></p>
4. </form>

Important

We must have a attribute enctype = “multiplat/form-data” in form tag. This attribute mention how data should be encoded before uploading to the server.

type =”file” will create an array by using PHP Global function $_FILE[] from which is going to upload and all information in separate elements like file name, file size, temporary location.

PHP Script

When user click submit button to upload file then php script comes in action.

1. if(isset($_POST["submit"])){
3. }

Getting file name

1. $file_name = $_FILES['myfile']['name'];

Getting temporary location of file from file array. Wen user upload files php hold the file in temporary location on server during the upload process.

1. $file_tmp = $_FILES['myfile']['tmp_name'];

Now we will get the file size from file array. It will help in providing restriction  file size.

1. $file_size = $_FILES['myfile']['size'];

Getting file extension from the file using explode function. This function convert the  string to array with specified separator.

1. $get_extension = explode('.',$file_name);

Now get proper extension of file using end function and also convert the extension in lower.

1. $get_extension = strtolower(end($get_extension));

here I am using uniqid() function to prevent the upload file with same name.

1. $new_file = uniqid().'.'.$get_extension;

Set the location where you want to upload the file. Here I am using uploads directory to upload file.

1. $file_store = "uploads/".$new_file;

Now make the required validation before upload file on destination folder, like file size, file type with if condition

Here I am allowing only jpg, png and gif image with less than or equal to 200kb.

1. if ($get_extension=='jpg' || $get_extension=='png' || $get_extension=='gif') {
2. if($file_size>=200000){
3. echo "<script>alert('Max. file size should be 200 KB.')</script>";
4. }
5. else{
6. if(move_uploaded_file($file_tmp, $file_store)){
7. echo "<script>alert('$file_name is uploaded successfully with uniq ID')</script>";
9. };
10. }
11. }
12. else{
13. echo "<script>alert('Please select only jpg, png or gif image only.')</script>";
14. }
15. }

Finally  as if no errors occurred the move_upload function will upload file to destination folder from temporary location with unique name.

Complete Code for Upload file using PHP

1. <?php
2. if(isset($_POST["submit"])){
3. $file_name = $_FILES['myfile']['name'];
5. $file_tmp = $_FILES['myfile']['tmp_name'];
7. $file_size = $_FILES['myfile']['size'];
9. $get_extension = explode('.',$file_name);
11. $get_extension = strtolower(end($get_extension));
13. $new_file = uniqid().'.'.$get_extension;
15. $file_store = "uploads/".$new_file;
17. //move_upload_file() function is use to store the file to destination folder from the temperary folder. It have two parameter 1. for temperary file 2. destination folder.
18. if ($get_extension=='jpg' || $get_extension=='png' || $get_extension=='gif') {
19. if($file_size>=200000){
20. echo "<script>alert('Max. file size should be 200 KB.')</script>";
21. }
22. else{
23. if(move_uploaded_file($file_tmp, $file_store)){
24. echo "<script>alert('$file_name is uploaded successfully with uniq ID')</script>";
25. }
26. }
27. }
28. else{
29. echo "<script>alert('Please select only jpg, png or gif image only.')</script>";
30. }
31. }
34. ?>

HTML Form validation using PHP

HTML Form validation using PHP

In this tutorial we will make form validation using PHP. We will check and validate to most common element of a HTML form.

See Demo 

Why we need to validation?

HTML form is used to collecting information from user for further communicate or recognizing as well as providing the necessary information to the particular user.

Form Validation Process

Form validation using PHP applies useful security and approach to user for filling the relevant information as per required.

The Process

First we need HTML form with submit button and some input field to collecting data like text, email, text area, radio buttons, checkbox.
For tutorial point of view I am using all most of the form field to make better understand of validation process in PHP.

HTML Form

1. <form id="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
2. 
   
3. </form>

Here Im using Id selector for targeting css for the this particular form and its elements and two form attributes :
1. action and 2. method.

The action : $_SERVER[‘PHP_SELF’] perform the validation on current page, for security I will wrap this request into php inbuilt function htmlspecialchars(). htmlspecialchars() function convert the special character like (“”, <>) into HTML entities as &quot;, &gt;, &lt. So hackers can not insert any script or query in our HTML form.

The method : Here I am using post method to sending data to server. The post method is more secure than get method. In get method the request add to the url which is visible to everyone and request remains in browser history which can be cached. This can be harmful for our data.

HTML Structure

1. <html>
2. <head>
3. <title>HTML form validation using PHP</title>
4. 
   
6. </head>
7. <body>
8. <div class="container">
9. 
   
10. <form id="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
11. <h3>Form Validation</h3>
12. <h4>Complete form validation using PHP</h4>
13. <fieldset>
14. <input placeholder="Your name" type="text" tabindex="1" name="name">
15. <span><?php echo $nameErr ;?></span>
16. </fieldset>
17. <fieldset>
18. <input placeholder="Your Email Address" type="email" name="email">
19. <span><?php echo $emailErr ;?></span>
20. </fieldset>
21. <fieldset>
22. <input placeholder="Your Phone Number" type="text" name="phone">
23. <span><?php echo $phoneErr ;?></span>
24. </fieldset>
25. <fieldset>
26. <input placeholder="Your Pin Code" type="text" name="pin">
27. <span><?php echo $pinErr ;?></span>
28. </fieldset>
29. <fieldset>
30. <input placeholder="Your Url" type="text" name="url">
31. <span><?php echo $urlErr ;?></span>
32. </fieldset>
33. <fieldset>
34. Gender
35. <input type="radio" name="gender[]" value="Male">Male
36. <input type="radio" name="gender[]" value="Female">Female
37. <br><span><?php echo $genderErr ;?></span>
38. </fieldset>
39. 
    
40. <fieldset>
41. Hobbies
42. <input type="checkbox" name="vehicle[]" value="Bike">I have a bike
43. <input type="checkbox" name="vehicle[]" value="Car">I have a car
44. <input type="checkbox" name="vehicle[]" value="Cycle">I have a Bycycle
45. <br><span><?php echo $vehicleErr ;?></span>
46. </fieldset>
47. <fieldset>
48. <textarea placeholder="Type your Message Here...." name="text"></textarea>
49. <br><span><?php echo $textErr ;?></span>
50. </fieldset>
51. <fieldset>
52. <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
53. </fieldset>
54. <div style="text-align: center;">
55. <?php
56. $date = new DateTime('now', new DateTimeZone('Asia/Kolkata'));
57. echo '&copy;'.' Copyright - '. $date->format('d-m-Y');
58. ?>
59. </div>
60. </form>
61. </div>
62. </body>
63. </html>

Styling with CSS

1. <style>
2. @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
3. 
   
4. * {
5. margin:0;
6. padding:0;
7. box-sizing:border-box;
8. -webkit-box-sizing:border-box;
9. -moz-box-sizing:border-box;
10. -webkit-font-smoothing:antialiased;
11. -moz-font-smoothing:antialiased;
12. -o-font-smoothing:antialiased;
13. font-smoothing:antialiased;
14. text-rendering:optimizeLegibility;
15. }
16. 
    
17. body {
18. font-family:"Open Sans", Helvetica, Arial, sans-serif;
19. font-weight:300;
20. font-size: 12px;
21. line-height:30px;
22. color:#777;
23. background:#0CF;
24. }
25. 
    
26. .container {
27. max-width:400px;
28. width:100%;
29. margin:0 auto;
30. position:relative;
31. 
    
32. }
33. 
    
34. #contact input[type="text"], #contact input[type="email"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
35. 
    
36. input[type="checkbox"]{
37. display:inline-block;
38. margin-right:2px;
39. }
40. #contact {
41. background:#F9F9F9;
42. padding:25px;
43. margin:20px 0;
44. border-radius: 0 30px 0 30px;
45. }
46. 
    
47. 
    
48. #contact h3 {
49. color: #F96;
50. font-size: 40px;
51. font-weight: 300;
52. }
53. 
    
54. #contact h4 {
55. margin:5px 0 15px;
56. font-size:13px;
57. }
58. 
    
59. fieldset {
60. border: medium none !important;
61. margin: 0 0 10px;
62. min-width: 100%;
63. padding: 0;
64. width: 100%;
65. }
66. 
    
67. #contact input:not([type="radio"]), textarea {
68. width:100%;
69. border:1px solid #CCC;
70. background:#FFF;
71. margin:0 0 5px;
72. padding:10px;
73. }
74. #contact input[type="checkbox"], input[type="radio"]{
75. width:auto;
76. border:1px solid #CCC;
77. background:#FFF;
78. margin:0 0 5px;
79. padding:10px;
80. }
81. 
    
82. #contact input:hover, #contact input[type="email"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
83. -webkit-transition:border-color 0.3s ease-in-out;
84. -moz-transition:border-color 0.3s ease-in-out;
85. transition:border-color 0.3s ease-in-out;
86. border:1px solid #AAA;
87. }
88. 
    
89. #contact textarea {
90. height:100px;
91. max-width:100%;
92. resize:none;
93. }
94. 
    
95. #contact button[type="submit"] {
96. cursor:pointer;
97. width:100%;
98. border:none;
99. background:#0CF;
100. color:#FFF;
101. margin:0 0 5px;
102. padding:10px;
103. font-size:15px;
104. }
105. 
     
106. #contact button[type="submit"]:hover {
107. background:#09C;
108. -webkit-transition:background 0.3s ease-in-out;
109. -moz-transition:background 0.3s ease-in-out;
110. transition:background-color 0.3s ease-in-out;
111. }
112. 
     
113. #contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
114. 
     
115. #contact input:focus, #contact textarea:focus {
116. outline:0;
117. border:1px solid #999;
118. }
119. ::-webkit-input-placeholder {
120. color:#888;
121. }
122. :-moz-placeholder {
123. color:#888;
124. }
125. ::-moz-placeholder {
126. color:#888;
127. }
128. :-ms-input-placeholder {
129. color:#888;
130. }
131. span{
132. color:#f00;
133. }
134. </style>

Form Validation using PHP

Setting up variable for collecting fields value.

1. // setting up variables for inputs;
2. $name = $email = $phone = $pin = $url = $gender = $vehicle = $text = "";

Setting up variable for collecting if any errors in particular field.

1. // setting up variables for showing erros
2. $nameErr = $emailErr = $phoneErr = $pinErr = $urlErr = $genderErr = $vehicleErr = $textErr = "";

Now we create a function to check input fields.

1. function test($data)
2. {
3. $data = trim($data); // removes the extra spaces, tabs and lines from the input field
4. $data = stripslashes($data); // removes the backslaces (\) from the input field
5. $data = htmlspecialchars($data); // converts the special characters into HTML entities
6. return $data;
7. }

Now we can perform our verification on submitting the submit button.

1. // submit button
2. if(isset($_POST['submit']))
3. {
4. // validation for name field
5. if(empty($_POST['name']))
6. {
7. $nameErr = "Name is Required";
8. // $errors ++;
9. }else
10. {
11. $name = test($_POST['name']);
12. //check if name only contains letters and whitespace
13. if(!preg_match("/^[a-z A-Z ]*$/", $name))
14. {
15. $nameErr = "Only letters allowed with White Space in between";
16. }
17. }
18. // validation for email field
19. if(empty($_POST['email']))
20. {
21. $emailErr = "Email is Required";
22. // $errors ++;
23. }else
24. {
25. $email = test($_POST["email"]);
26. // check if e-mail address is well-formed
27. if (!filter_var($email, FILTER_VALIDATE_EMAIL))
28. {
29. $emailErr = "Invalid email format";
30. }
31. }
32. // validation for phone field
33. if(empty($_POST['phone']))
34. {
35. $phoneErr = "Phone is Required";
36. // $errors ++;
37. }else
38. {
39. $phone = test($_POST['phone']);
40. //check if phone only contains numbers
41. if(!preg_match("/^[0-9]*$/", $phone))
42. {
43. $phoneErr = "Only numbers allowed";
44. }
45. else
46. {
47. if(strlen($phone)<10)
48. {
49. $phoneErr = "Invalid Phone";
50. }
51. }
52. }
54. // validation for pin field
55. if(empty($_POST['pin']))
56. {
57. $pinErr = "Pin is Required";
58. // $errors ++;
59. }else
60. {
61. $pin = test($_POST['pin']);
62. //check if phone only contains numbers
63. if(!preg_match("/^[0-9]*$/", $pin))
64. {
65. $pinErr = "Only numbers allowed";
66. }
67. else
68. {
69. if(strlen($pin)!==6)
70. {
71. $pinErr = "Invalid Pin";
72. }
73. }
74. }
75. // url verification
76. if (empty($_POST["url"]))
77. {
78. $urlErr = "URL is Required";
79. // $errors ++;
80. }
81. else
82. {
83. $url = test($_POST["url"]);
84. // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
85. if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$url))
86. {
87. $urlErr = "Invalid URL";
88. }
89. }
90. // radio button verification
91. if (isset($_POST['gender']))
92. {
93. if (!empty($_POST['gender']))
94. {
95. foreach ($_POST['gender'] as $selectedGender)
96. {
97. $gender = $selectedGender;
98. }
99. }
100. }
101. else
102. {
103. $genderErr = "please select Gender";
104. // $errors ++;
105. }
106. // select button verification
107. if (isset($_POST['vehicle']))
108. {
109. if (!empty($_POST['vehicle']))
110. {
111. foreach ($_POST['vehicle'] as $selectedVehicle)
112. {
113. $vehicle = $selectedVehicle;
114. }
115. }
116. }
117. else
118. {
119. $vehicleErr = "please select Vehicle";
120. // $errors ++;
121. }
122. // validation for text Area
123. if(empty($_POST['text']))
124. {
125. $textErr = "Please submit your comments";
126. // $errors ++;
127. }else
128. {
129. $text = test($_POST['text']);
130. }
131. } // end of submit button

If do not any  errors by submitting form then we can mail or insert data in our database.

I hope it will help you in your projects form validation.