Preview photo after selecting in file input

/* ====== style for file input ======================================= */

.custom-file-input {
    color: transparent;
}

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: ‘Select Photo’;
    color: black;
    display: inline-block;
    /*background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);*/
    background-color: #FFB606;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 10px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file-input:hover::before {
    border-color: black;
}

.custom-file-input:active {
    outline: 0;
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);

}

/* ======== style for file input ======================================= */







     
      Clear
     


     







//======== JavaScript ================================================

//variables
var $PhotoInput = $(“#PhotoInput”), $ClearPhoto= $(“#ClearPhoto”);
var $PhotoPreview=$(‘#PhotoPreview’); // img tag

//initially hide img tag.
$PhotoPreview.hide(); $ClearPhoto.hide();

//Handling file change event.
$(“#PhotoInput”).change(function () {
    PreviewPhoto(this); //Calling function to show preview of selected image.

});

//Function to show image preview.
function PreviewPhoto(input) {
      if (input.files && input.files[0]) {
            var photoSize = input.files[0].size;
            photoSize = photoSize / 1024;
            if (photoSize > 600) {
                    ClearPhoto(); //Clearing image if any.
                    $ClearPhoto.hide();
                    alert(‘Please select smaller photo less than 600KB in size’);
            }
            else {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $PhotoPreview.attr(‘src’, e.target.result);
                        $PhotoPreview.show();
                        $ClearPhoto.show();
                    }
                    reader.readAsDataURL(input.files[0]);
            }
      }
}

//function to clear img
function ClearPhoto() {
      $PhotoInput.replaceWith($PhotoInput.val(”).clone(true));
      $PhotoPreview.hide();
      $PhotoPreview.attr(‘src’,’#’);

}
//======== JavaScript ================================================

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s