如何在选择文件后显示文件预览？
如何在选择文件后显示文件预览？
提问于 2018-10-08 05:42:00
我有上传文件按钮，从那里我可以上传图像，文档，pdf文件和优秀。我想显示这些选定文件的预览。
我能够显示预览的图像和PDF文件，但不了解如何显示预览如果文件是文档或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和/或Image，但不适用于文档或excel文件，则此代码工作正常。知道如何显示文档和excel文件的预览吗？
回答 2
Stack Overflow用户
发布于 2018-10-08 08:57:09
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文件，因为浏览器不支持该文件预览，因此需要额外的第三方控制才能将该文件呈现到浏览器中。没有数据，这是不可能的。
Stack Overflow用户
发布于 2018-10-08 06:27:28
如果您的文件是excel，您可以将它作为这里读入JSON，然后从JSON中选择并在表中显示它
如果是doc，那么当您用FIleReader()阅读它时，它是内置的javascript作为readAsDataURL，e.target.result将是一个字符串，所以选择前5行，然后在div中显示它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52696008
复制相关文章
相似问题
腾讯云开发者
