我正在使用 HTML5 File API 上传一些文档（.doc/.docx/.pdf）。我想在将其上传到服务器之前显示该文档预览。有没有办法在客户端做这样的事情？
附： Google Docs Viewer 不行，因为它需要可以从 Internet 访问文档。
【问题讨论】：
标签： javascript jquery html
我尝试创建一个小示例，在上传 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>
【讨论】：
不确定是否还有人检查此线程，但我想我会分享我所做的。 无法直接显示预览，但您可以创建所选文件的 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>');
});
此链接将打开一个新的浏览器选项卡并显示/下载文件。这不是很漂亮，但它确实有效。 这是一个例子：https://jsfiddle.net/j9gw023b/3/
【讨论】：
没有。这是不可能的。
您希望浏览器查看它不应该查看的数据文件。您有 Office 或 PDF 查看器（好的，已授权，PDF ssem 现在可以在浏览器中...）来查看您的数据文件。
如果您想在浏览器中显示预览，您必须先上传它并将其存储在“for-preview”目录或其他东西中。确定后，将其移动到最终目的地，否则，删除。
【讨论】：
File API 将允许您从文件中读取数据，但是您会遇到解析和渲染它的麻烦。 Mozilla 发布了JavaScript PDF viewer，但我不知道任何有关 MS Office 文件的信息。
【讨论】：
在过去你能够做这样的事情：
<object data="word.doc">You do not have Word installed on your machine</object>
不确定是否仍然支持，但如果支持，您可以使用 JS 将该对象注入到页面上以进行预览。
【讨论】：
Ajax 上传你的文件，上传后返回路径名并预览。
blueimp 的 jQuery-File-Upload 非常适合我。
你可以查看它的基本插件。
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
【讨论】：
你可以用pdf来做，这里是教程：
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
不知道doc/docx是否可以
【讨论】：