Jquery 上传前预览xls、xlsx、文档等文件的缩略图

Jquery 上传前预览xls、xlsx、文档等文件的缩略图,jquery,excel,upload,preview,Jquery,Excel,Upload,Preview,我很难弄清楚如何在上传之前预览文件缩略图。因此,当我使用文件选择器浏览文件并选择要上载的文件时,它将显示相应的预览,如.txt、.csv、.xls或xlsx等。是否有任何方法可以实现这一点?简单的方法或复杂的方法都可能奏效。我怎样才能做到这一点 html文件 <form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="yo

我很难弄清楚如何在上传之前预览文件缩略图。因此,当我使用文件选择器浏览文件并选择要上载的文件时,它将显示相应的预览,如.txt、.csv、.xls或xlsx等。是否有任何方法可以实现这一点?简单的方法或复杂的方法都可能奏效。我怎样才能做到这一点

html文件

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

如果不先转换文件,就无法执行此操作。有第三方服务(box view api、google docs viewer)可以转换文件并在浏览器中显示,但你必须先上传文件,这就违背了这一点

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);
});