image validation in javascript – How to validate image file in JavaScript?

image validation in javascript – Filtering and validating file uploads with Javascript. how to check (validate) File (Image) size before upload using JavaScript and jQuery.

image validation in javascript

I will validate image file using JavaScript as well as allow user to select only .jpg, .jpeg, .png, and .gif type file.

File Type (extension) Validation with JavaScript

HTML code(index.html)

JavaScript Code

function checkAndFilterFiles(){
    var userFileImg = document.getElementById('file');
    var destOrignalFile = userFileImg.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!allowedExtensions.exec(destOrignalFile)){
        alert('Please you can upload file having extensions .jpeg/.jpg/.png/.gif only.');
        userFileImg.value = '';
        return false;
    }else{
        //Image displaying
        if (userFileImg.files && userFileImg.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '';
            };
            reader.readAsDataURL(userFileImg.files[0]);
        }
    }
}

Don’t Miss : Image Size Validation In Javascript Example

File Size Validation Using Javascript Example

index.html

    
    
    


    

        

            

                

                    

                        
File Size Validation Using Javascript Example
                    
                    

                        

                            Image:
                            

                            Submit        
                       
                    
            
        
    

I hope you get an idea about image validation in javascript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.