选择文件后如何显示文件预览?
Posted
技术标签:
【中文标题】选择文件后如何显示文件预览?【英文标题】: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文件预览?有插件吗? 嗯,有一种方法,但你可能需要有创意看看这个***.com/questions/27957766/… grapecity.com/en/blogs/… @Mohammed,我尝试使用带有 embed true 选项的 iframe src,但没有成功 【参考方案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="#" />
</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 中。
【讨论】:
以上是关于选择文件后如何显示文件预览?的主要内容,如果未能解决你的问题,请参考以下文章