我有上传文件按钮,我可以从那里上传图片、文档、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 文件的预览吗?
最佳答案
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 文件,因为浏览器不支持该文件预览,您需要额外的第三方控制才能将该文件呈现到您的浏览器中。没有数据是不可能的。
关于javascript - 选择文件后如何显示文件预览?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52696008/