Preview thumbnail of an xls, xlsx, doc, etc file before upload

Question

I'm having hard time figuring out how to preview the file thumbnail image something like that before uploading it. So when i browse a file using file chooser and select the file i wanted to upload it will display its corresponding preview, like .txt, .csv, .xls, or xlsx, etc. Is there a way to achieve this in any ways? Simple ways or complex ways may work. How do i achieve something like this one?

html file

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

here the js

function readURL(input) {
    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]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Answer 1

There is no way to do this without converting the file first. There are third party services (box view api, google docs viewer), that convert the file and display it in browser, but you have to upload the file first, which kind of defeats the point.