关于javascript：选择文件后如何显示文件预览？


How to display preview of files after choose file?

我有上载文档按钮，从中可以上传图像，文档，pdf文件和excel。我想显示这些选定文件的预览。

我能够显示图像和PDF文件的预览，但是如果文件是doc或excel文件，则无法获取如何显示预览。

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

HTML代码是：

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

JS代码为：

1
2
3
4
5
6
7
8
9
10
11
12
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文件预览的任何想法吗？

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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">
<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="imgFile" src="#" alt="your image" />
</form>

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

相关讨论

如果您的文件是excel，则可以在此处将其读取为JSON
然后选择与JSON分开并在table

中显示

，并且当您使用内置javascript的FIleReader()读取文档时是否为doc
作为readAsDataURL的e.target.result将是一个字符串，因此请像前5行一样进行选择并将其显示在div中。