在上传前预览xls、xlsx、doc等文件的缩略图

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?

在上传之前，我很难弄清楚如何预览文件的缩略图。因此，当我使用file chooser浏览一个文件并选择要上传的文件时，它会显示相应的预览，比如.txt、.csv、.xls或xlsx等等。简单的方法或者复杂的方法都可以。我如何实现这样的目标?

html file

html文件

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

here the js

这里的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);
});

1 个解决方案

#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.

如果不首先转换文件，就没有办法做到这一点。有第三方服务(box view api，谷歌docs查看器)，它们转换文件并在浏览器中显示，但是您必须先上传文件，这就违背了这一点。

1 个解决方案

#1

更多相关文章

随机推荐