Display Image And Validation Of Image Extension Before Uploading File Using Javascript

My goal is to first validate the upload file is an image and if it is an image I will display it. I get the codes from Validation Code and Image Code. At first I was able to displa

Solution 1:

I am able to solve it. Below ar the correct codes. :)

JavaScript

<SCRIPTtype="text/javascript">functionValidateFileUpload() {
        var fuData = document.getElementById('fileChooser');
        varFileUploadPath = fuData.value;

//To check if user upload any fileif (FileUploadPath == '') {
            alert("Please upload an image");

        } else {
            varExtension = FileUploadPath.substring(
                    FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

//The file uploaded is an imageif (Extension == "gif" || Extension == "png" || Extension == "bmp"
                    || Extension == "jpeg" || Extension == "jpg") {

// To Displayif (fuData.files && fuData.files[0]) {
                    var reader = newFileReader();

                    reader.onload = function(e) {
                        $('#blah').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(fuData.files[0]);
                }

            } 

//The file upload is NOT an imageelse {
                alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");

            }
        }
    }
</SCRIPT>

The input on change:

<inputtype="file" name="dataFile"id="fileChooser" onchange="return ValidateFileUpload()" />

To display an image before uploaded:

<img src="images/noimg.jpg"id="blah">

Solution 2:

We Solved it.. Here Is the Complete code :) This Code will help you to

1. Upload and display image (Not Upload Function)
2. Image Extension Validation
3. Reset img in case validation return false

functionshow(input) {
        debugger;
        var validExtensions = ['jpg','png','jpeg']; //array of valid extensionsvar fileName = input.files[0].name;
        var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
        if ($.inArray(fileNameExt, validExtensions) == -1) {
            input.type = ''
            input.type = 'file'
            $('#user_img').attr('src',"");
            alert("Only these file types are accepted : "+validExtensions.join(', '));
        }
        else
        {
        if (input.files && input.files[0]) {
            var filerdr = newFileReader();
            filerdr.onload = function (e) {
                $('#user_img').attr('src', e.target.result);
            }
            filerdr.readAsDataURL(input.files[0]);
        }
        }
    }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><divclass="form-group">
              Upload Your Image
                    <divclass="col-md-10"><div><imgid="user_img"height="130"width="130"style="border:solid" /></div><div><inputtype="file"title="search image"id="file"name="file"onchange="show(this)" /></div></div></div>

Solution 3:

functionisValidPhoto(fileName)
{
    var allowed_extensions = newArray("jpg","png");
    var file_extension = fileName.split('.').pop().toLowerCase(); 

    for(var i = 0; i <= allowed_extensions.length; i++)
    {
        if(allowed_extensions[i] == file_extension)
        {
            returntrue; // valid file extension
        }
    }

    returnfalse;
}