Hello friends, Today i am going to share with you one more important tutorial. Today we will learn about how to file upload validation in JavaScript. Many forms have upload file option. People can upload various file to the form as their requirement. We have to validate it as per our application’s requirement. We can validate the file at server side but it will take too long process to validate it. Javascript validation for upload file is very light and more useful. Here we check that uploaded file must be .PNG, .JPG or .GIF format. File must not be more that 3MB. Let’s make it real with below example.
Create a index.php file and make a form with upload file option. You can see my code for upload file.
index.php
<!DOCTYPE html> <html> <head> <title>File validation using javascript</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="main.js"></script> </head> <body> <h1><center>File validation using javascript</center></h1> <form action="" method="post" onsubmit="return validate();" > <table class="form-table"> <tr> <td><label>Choose File:</label></td> <td> <input type="file" name="file" id="file"> </td> </tr> <tr> <td></td> <td id="file_error" class="error"></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" value="Submit"></td> </tr> </table> </form> </body> </html>
We can use style.css for create a style code the file upload form.
style.css
.form-table
{
width:350px;
margin-left: auto;
margin-right: auto;
}
label{
font-weight: bold;
}
#form_submission_ajax{
background-color: #eee;
padding-top: 10px;
padding-bottom: 10px;
}
.error{
color: #ff0000;
}
input {
border: 2px solid #531EBF;
padding: 4px;
}
input[type="submit"] {
padding: 5px 15px;
background-color: #531EBF;
border: 2px solid #531EBF;
color: #fff;
border-radius: 5px;
}
h1 {
color: #531EBF;
}
Finally we have javascript validation code for uploaded file. Make a main.js file for this code. Let’s see…
main.js
function validate()
{
var valid = true;
var file_name = "";
var file_type = "";
var file_size = "";
var error_msg = "";
var valid_size = 3*1000*1000;
var display_error = document.getElementById('file_error');
var file = document.getElementById("file");
if(file.files.length != 0)
{
file_name = file.files[0].name;
file_size = file.files[0].size;
file_type = file.files[0].type;
if(file_type!="image/png" && file_type!="image/jpeg" && file_type!="image/gif")
{
valid = false;
error_msg = error_msg + "\n* Only 'PNG', 'JPG/JPEG' and 'GIF' file type supported.";
}
if(file_size > valid_size)
{
valid = false;
error_msg = error_msg + "\n* Filesize should be upto 3MB.";
}
}
else
{
valid = false;
error_msg = error_msg + "\n* Please select any image file.";
}
if(valid==true)
{
alert("File pass all validation. Now it is ready to send.");
/*Write ajax code here to send file to the server.*/
return true;
}
else
{
display_error.innerHTML = error_msg;
return false;
}
}
In the above JavaScript validation code, first we get file input using getElementById() function. If file length is zero then it will display errors otherwise it will validate all parameters of file and show message that file is good for upload or not.
I hope that you like this tutorial, Please share it with your loving persons. If you have any error regarding this tutorial then let me know. I will help you to solve it. Thank you 🙂
