选择文件后如何显示文件预览？答案

【问题标题】：How to display preview of files after choose file?选择文件后如何显示文件预览？
【发布时间】：2019-03-12 18:07:29
【问题描述】：

我有上传文件按钮，我可以从那里上传图片、文档、pdf 文件和 Excel。我想显示这些选定文件的预览。

我可以显示图像和 PDF 文件的预览，但如果文件是 doc 或 excel 文件，我不知道如何显示预览。

这是我用于显示文件预览的通用代码。

HTML 代码为：

<input type="file" name="medical_doc" multiple="multiple" onchange="PreviewDocument('wildlife');" id="preview_animal_doc_wildlife">

JS代码为：

function PreviewDocument(type) {
    var outerDiv = document.createElement("DIV");
    outerDiv.setAttribute("class", 'col-md-2 document-col');
    outerDiv.setAttribute("id", 'append_animal_doc_preview_div');

    var outerImage = document.createElement("EMBED");
    outerImage.setAttribute("class", 'img-doc');
    outerImage.setAttribute("src",  e.target.result);

    outerDiv.appendChild(outerImage);

}

如果选择的文件是 PDF 和/或图像，此代码可以正常工作，但不适用于 doc 或 excel 文件。知道如何显示 doc 和 excel 文件的预览吗？

【问题讨论】：

上传前不能在浏览器中显示excel或doc文件，pdf和图片可以。
那么gmail如何显示doc预览以及excel文件预览？有插件吗？
嗯，有一种方法，但你可能需要有创意看看这个stackoverflow.com/questions/27957766/…
grapecity.com/en/blogs/…
@Mohammed，我尝试使用带有 embed true 选项的 iframe src，但没有成功

标签： javascript jquery html

【解决方案1】：

function ReadURL(input) {
 if (input.files && input.files[0]) {
   var reader = new FileReader();
   reader.onload = function(e) {
     $('#imgFile').attr('src', e.target.result);
    }
   reader.readAsDataURL(input.files[0]);
   }
 }
 $(document).ready(function(){
 $("#imgInp").change(function() {
  ReadURL(this);
 });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="imgFile" src="#" alt="your image" />
</form>

您无法显示 excel 和 doc 文件，因为浏览器不支持该文件预览，您需要额外的第三方控制才能将该文件呈现到浏览器中。没有数据是不可能的。

【讨论】：

谢谢您的回复，我认为这仅适用于图像，是的，我正在寻找一个可以帮助我的插件
您是否正在使用 java 或 dot net 或其他语言开发您的网站？
我对php不太了解，请看github.com/PHPOffice/PHPWord

【解决方案2】：

如果您的文件是 excel，您可以将其读取为 JSON，如 here 然后从 JSON 中选择并在表格中显示它

如果是 doc，当您使用内置 javascript 的 FIleReader() 阅读它时因为readAsDataURL e.target.result 将是一个字符串，所以选择前 5 行并将其显示在一个 div 中。

【讨论】：