sFileTypeChecker – JQuery Plugin To Validate Input File
Introducing New plugin sFileTypeChecker to validate file type while uploading. sFileTypeChecker is light weight jQuery plugin checks either user has selected valid file or not when user select file using HTML file control. The basic principle of this plugin is to check the file uploaded by user is valid file having extension mensioned by user and error messages for HTML elements in JavaScript.
Read More:
sSwitch – JQuery Plugin For Sliding Toggle Switches
How To Create Simple JQuery plugin
Integrate sFileTypeChecker JQuery Plugin Into HTML Page
This tutorial shows you how to set up a sFileTypeChecker plugin in HTML page. You need basic level knowledge of JavaScript, JQuery and HTML.
|
1
2
3
4
|
index.php
/js
sFileTypeChecker.min.js
jQuery.min.js
|
Basic usage is quite straightforward. Select the file inputs you wish to have validated, and invoke sFileTypeChecker.
Include JavaScript and CSS Files
Download and Include the jQuery and sFileTypeChecker plugin JavaScript at the bottom of >body< tag. Download JQuery library in js folder. You need to have basic skill of JQuery Framework and JavaScript Scripting language.
|
1
2
|
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/sFileTypeChecker.min.js"></script>
|
Add Form Controls In Page
|
1
2
3
4
5
6
|
<form action="#" method="post" enctype="multipart/form-data">
<div>
<label for="image">Upload Image (Only JPEG and PNG allowed)</label>
<input type="file" name="ctlImage" id="ctlImage" />
</div>
</form>
|
Add file input box to upload file having id ctlImage. We will use id in later part at time of
initialization.
Invoking Plugin
Invoke sFileTypeChecker plugin with extension and functions. We have used $('#ctlImage') to invoke plugin on file control.
|
1
2
3
4
5
6
7
8
9
10
11
|
$(document).ready(function($) {
$('#ctlImage').sFileTypeChecker({
extensions: ['jpg', 'jpeg', 'png'],
success: function() {
alert('Uploaded Image is valid image');
},
error: function() {
alert("Uploaded Image is invalid image");
}
});
});
|
extensions: Holds array of extension which should be allowed in file upload.
Eg,
|
1
2
|
extensions: ['jpg', 'jpeg', 'png'] // Allows Images
extensions: ['xlsx', 'xsl', 'pdf'] // Allows PDF and Excel files only
|
success: function(){}: If user uploads valid file than success() function will execute. Here, You can write bunch code if valid file selected.
error: function(){}: If user uploads invalid file than error() function will execute. Here, You can write bunch code if invalid file selected.
Plugin verifies uploaded file’s extension is exists in plugin extension parameter or not. When user select a file, Plugin will imidiatily check that uploaded file is either valid or not. If uploaded file has allowed extension than success() will call. If file is not valid than error() will be called.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<body>
<form action="#" method="post" enctype="multipart/form-data">
<div>
<label for="image">Upload Image (Only JPEG and PNG allowed)</label>
<input type="file" name="ctlImage" id="ctlImage" />
</div>
</form>
</body>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/sFileTypeChecker.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('#ctlImage').sFileTypeChecker({
extensions: ['jpg', 'jpeg', 'png'],
success: function() {
alert('Uploaded Image is valid image');
$(this).val('');
},
error: function() {
alert("Uploaded Image is invalid image");
$(this).val('');
}
});
});
</script>
|
This Plugin also helps to beginers to create simple JQuery plugins. It supports all the modern browsers such as Google Chrome, Mozilla Firefox, Safari, Opera and Internet Explorer >V11
Read More:
sSwitch – JQuery Plugin For Sliding Toggle Switches
How To Create Simple JQuery plugin
How To Implement Infinite Scroll Using JQuery, Ajax and PHP
Integrate Google Prettify in Html Page
Verify Your Server Meets PayPal Payment Gateway Requirements
Integrate google reCAPTCHA in your website
