在上传到服务器之前预览 .doc/.docx/.pdf 文件
[英]Preview .doc/.docx/.pdf files before uploading to server
问题描述
I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded.
我正在使用 HTML5 文件 API 来上传一些文档（.doc/.docx/.pdf）。 And I want to show that document preview before uploading it to server.我想在将其上传到服务器之前显示该文档预览。 Is there any way to do such thing on client side?有没有办法在客户端做这样的事情？
PS Google Docs Viewer isn't ok, because it requires document to be accessible from the internet. PS Google Docs Viewer 不行，因为它需要可以从互联网访问文档。
8 个解决方案
解决方案1
30 2014-01-09 10:37:20
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>
解决方案2
5 2018-01-10 11:56:36
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.无法直接显示预览，但您可以创建所选文件的 blob 对象。 Something like this (jQuery):像这样（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/
解决方案3
4 已采纳 2013-06-27 13:39:48
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.如果要在浏览器中显示预览，则必须先上传它并将其存储在“for-preview”目录中。 When OK, move it to its final destination, otherwise, delete.确定后，将其移至最终目的地，否则，删除。
解决方案4
3 2013-06-27 13:42:24
The File API will allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. File API将允许您从文件中读取数据，但是您在解析和呈现它时遇到了麻烦。 Mozilla have released a JavaScript PDF viewer , but I'm not aware of anything for MS Office files. Mozilla 已经发布了JavaScript PDF viewer ，但我不知道 MS Office 文件的任何内容。
解决方案5
2 2013-06-27 13:36:52
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 将该对象注入页面以进行预览。
解决方案6
1 2014-08-31 14:57:15
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
解决方案7
0 2019-10-22 16:52:36
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 是否可以
解决方案8
0 2020-10-18 09:35:27
You can do it using this web component: https://avipunes.github.io/file-viewer/您可以使用此 Web 组件完成此操作： https : //avipunes.github.io/file-viewer/
This web component under the hood uses some microsoft embedding endpoint: https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}这个引擎盖下的 web 组件使用了一些微软嵌入端点： https : //view.officeapps.live.com/op/embed.aspx? src =${fileURI}
you can see an example here: https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls你可以在这里看到一个例子： https : //view.officeapps.live.com/op/embed.aspx?src=https : //file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.