why the image preview can not show any image in jquery?

Question

I have script that I use to preview image before uploading into database. But, somehow when I test it, it doesn't preview any image and I don't know what problem in there. Here is my script:

$(document).ready(function(){
    $("#uploadbtn").change(function(){
        var countFiles = $(this)[0].files.length;
        var imgPath = $(this)[0].value;
        var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        var image_holder = $("#show");
        image_holder.empty();

        if(extn == "jpg" || extn == "png" || extn == "jpeg" || extn == "gif") {
            if(typeof(FileReader) != "undefined") {
                for (var i = 0; i < countFiles; i++) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("<img />", {
                            "src" : e.target.result,
                            "weight" : 100,
                            "height" : 100
                        }).appendTo(image_holder);
                    }
                    image_holder.show();
                    reader.readAsDataURL($(this)[0].files[i]);
                }
            } else {
                alert("tidak support FileReader");
            }
        } else {
            alert("hanya untuk gambar");
        }
    });
});

Is there any problem or any error?

Answer 1

You can get your answer by my JSFIDDLE link

https://jsfiddle.net/yfgnz8m5/ Click on link