Display image and Validation of image extension before uploading file Using Javascript

Question

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 display image. However, when I combined display image code with validation code, I did not able to get both validation and display worked.

Can anyone please help me? Below are my codes. Thanks in advance! :)

<input type="file" name="dataFile" id="fileChooser" onchange="readURL(this);" />





<SCRIPT type="text/javascript">

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];

     function readURL(input) {

         var arrInputs = document.getElementById("fileChooser").value;
            for (var i = 0; i < arrInputs.length; i++) {
                var oInput = arrInputs[i];
                if (oInput.type == "file") {
                    var sFileName = oInput.value;
                if (sFileName.length > 0) {
                    var blnValid = false;
                    for (var j = 0; j < _validFileExtensions.length; j++) {
                        var sCurExtension = _validFileExtensions[j];
                        if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                            blnValid = true;

                            if (input.files && input.files[0])  {
                                var reader = new FileReader();

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

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


                            break;
                        }
                    }

                    if (!blnValid) {
                        alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                        return false;
                    }
                }
            }
        }

        return true;





    }

Answer 1

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

JavaScript

<SCRIPT type="text/javascript">
    function ValidateFileUpload() {
        var fuData = document.getElementById('fileChooser');
        var FileUploadPath = fuData.value;

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

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

//The file uploaded is an image

if (Extension == "gif" || Extension == "png" || Extension == "bmp"
                    || Extension == "jpeg" || Extension == "jpg") {

// To Display
                if (fuData.files && fuData.files[0]) {
                    var reader = new FileReader();

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

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

            } 

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

            }
        }
    }
</SCRIPT>

The input on change:

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

To display an image before uploaded:

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

Answer 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

function show(input) {
        debugger;
        var validExtensions = ['jpg','png','jpeg']; //array of valid extensions
        var 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 = new FileReader();
            filerdr.onload = function (e) {
                $('#user_img').attr('src', e.target.result);
            }
            filerdr.readAsDataURL(input.files[0]);
        }
        }
    }

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