Skip to main content

Reusable Image Validation (Client Side) Using jQuery

We will handle Image Validation using two ways, client side and server side. I have explained client side Image validation here. But you can also handle the server side Image Validation as you want.

Client Side Image Validation Using jQuery and Bootstrap


Here is the Form <input> field to upload  an Image file. I added "accept" attribute in the Input tag which indicates the types of file the server accepts. (read more: https://developer.mozilla.org/en/docs/Web/HTML/Element/input)



Here is the Reusable Image validation Script. In this Script it allows only JPEG, JPG and PNG files but you can add more file extensions as you want.




Note: Do not put this Script within (document).ready(function(){}) otherwise may be it will not work.   

Requirements:
jQuery
Bootstrap


Comments

Popular Posts

Bootstrap Responsive Media Queries CSS Tips

AS a developer I faces lots of problem while making website responsive to make website visible correctly on all devices like mobile, tablet and desktop. So, today I am sharing some Bootstrap responsive CSS styles and Media Queries  tips with you. But make sure that you are not repeating the same media queries for the same screen size. Otherwise it will override your previous CSS style rules.    The Grid Sizes .col-xs-$ => Extra Small (Phones Less than 768px) .col-sm-$ => Small Devices (Tablets 768px and Up) .col-md-$ => Medium Devices (Desktops 992px and Up) .col-lg-$  => Large Devices (Large Desktops 1200px and Up) Here is the Responsive CSS Style for all Screen Sizes Read more: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

List of latest and most asked PHP practical interviews questions & answers

Core PHP Practical Interview Questions In this blog post I am sharing a list of some most asked PHP interview questions & answers. These are very useful and helpful for the freshers and experienced developer too. I have taken these questions from different sources and listed here at one place. Ques. How to reverse a string without using any builtin function? Ans: <?php $str = 'My name is Diwakar Kumar'; $len = 0; while(isset($str[$len]) != '') $len++; for($i = $len ; $i >= 0 ; $i--) { echo @$str[$i]; } Ques: Write a function to check if a given string is a palindrome or not. Ans: 1st Method: <?php function isPalindrome($str) { $str = strtolower(preg_replace('/[^a-zA-Z0-9]/', '', $str)); // Convert to lowercase and remove non-alphanumeric characters $reverse = strrev($str); // Reverse the string return $str === $reverse; // Compare original and reversed string } 2nd Method: <?php funct

Document and PDF (.doc, .docx and .pdf) file type validation using jQuery

Document and PDF (.doc, .docx and .pdf) file validation using Bootstrap and jQuery Get here reusable file client side validation using Bootstrap and jQuery.