jQuery 在上传到服务器之前预览 .doc/.docx/.pdf 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17344636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preview .doc/.docx/.pdf files before uploading to server
提问by user1189338
I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?
我正在使用 HTML5 文件 API 来上传一些文档（.doc/.docx/.pdf）。我想在将其上传到服务器之前显示该文档预览。有没有办法在客户端做这样的事情？
P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.
PS Google Docs Viewer 不行，因为它需要可以从互联网访问文档。
采纳答案by Bart Friederichs
No. This is not possible.
不，这是不可能的。
You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.
您希望浏览器查看它不应该查看的数据文件。您有 Office 或 PDF 查看器（好吧，授予，PDF ssem 现在在浏览器中......）来查看您的数据文件。
If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.
如果要在浏览器中显示预览，则必须先上传它并将其存储在“for-preview”目录或其他内容中。确定后，将其移至最终目的地，否则，删除。
回答by Jigar M Dave
I have tried to create little example and that would display PDF Preview before uploading PDF file.
我试图创建一个小例子，它会在上传 PDF 文件之前显示 PDF 预览。
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body>
</html>
回答by Quentin
The File APIwill allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. Mozilla have released a JavaScript PDF viewer, but I'm not aware of anything for MS Office files.
该文件API将允许您从文件中读取数据，但你必须分析它，并使其的麻烦。Mozilla 已经发布了JavaScript PDF viewer，但我不知道 MS Office 文件的任何内容。
回答by Raphael Felten
Not sure if anyone still checks this thread, but i thought i'd share what i did. Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):
不知道是否有人还在检查这个线程，但我想我会分享我所做的。无法直接显示预览，但您可以创建所选文件的 blob 对象。像这样（jQuery）：
$('#input').change(function (event) {
var file = URL.createObjectURL(event.target.files[0]);
$('element').append('<a href="' + file + '" target="_blank">' + event.target.files[0].name + '</a>');
});
This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works. Here's an example: https://jsfiddle.net/j9gw023b/3/
此链接将打开一个新的浏览器选项卡并显示/下载文件。这不是很漂亮，但它有效。这是一个例子：https: //jsfiddle.net/j9gw023b/3/
回答by ZorleQ
Back in the days you were able to do something like that:
回到过去，您可以执行以下操作：
<object data="word.doc">You do not have Word installed on your machine</object>
Not sure if this is still supported, but if so, you could use JS to inject that object onto the page to preview it.
不确定这是否仍然受支持，但如果是这样，您可以使用 JS 将该对象注入页面以进行预览。
回答by Mavichow
Ajax upload your file,then after uploaded return path name and preview it.
Ajax上传你的文件，上传后返回路径名并预览。
blueimp's jQuery-File-Upload was great for me.
blueimp 的 jQuery-File-Upload 对我来说很棒。
you can view its basic plugin.
你可以查看它的基本插件。
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
回答by Luca C.
You can do it with pdf, here is the tutorial:
你可以用pdf来做，这是教程：
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
Don't know if it is possible for doc/docx
不知道 doc/docx 是否可以
