Show file on HTML page using file control

This post will help you to show preview of selected file from html file control because by default HTML file control only show the selected file name. So file preview is best way to show user that whether he is selected right file or not.

HTML

<input type="file" id="bfile" id="bfile" class="form-control" accept="image/x-png,image/jpeg" onChange="readURL(this)">

<br><img id="blah" style="margin:auto;display:block" />

JS

function readURL(input) {

  

    if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {

            $j('#blah')

                .attr('src', e.target.result)

                .width(350)

                .height(200);

        };

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

    }

}

Download Source

Next Topic