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

Question

我很难弄清楚如何在上传之前预览类似的文件缩略图。因此，当我使用文件选择器和 select 浏览文件时，我想上传的文件将显示其相应的预览，如 .txt、.csv、.xls 或 xlsx 等。有没有办法实现这个以任何方式？简单的方法或复杂的方法都可能奏效。我如何实现这样的目标？

html 文件

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

这里是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

如果不先转换文件，就无法执行此操作。有第三方服务（box view api、google docs viewer），可以转换文件并在浏览器中显示，但你必须先上传文件，这就失去了意义。

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

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

jquery

excel

upload

preview