use*_*338 18 javascript jquery html5
我正在使用HTML5 File API来上传一些文档(.doc/.docx/.pdf).我想在将文档上传到服务器之前显示该文档预览.有没有办法在客户端做这样的事情？
PS Google Docs Viewer不行,因为它需要可以从互联网访问文档.
小智 25
我试图创建一个小例子,在上传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>
不，这是不可能的。
您希望浏览器查看它不应该查看的数据文件。您有 Office 或 PDF 查看器（好吧，当然，PDF 系统现在位于浏览器中......）来查看您的数据文件。
如果你想在浏览器中显示预览，你必须先上传它并将其存储在“预览”目录或其他目录中。如果确定，则将其移动到最终目的地，否则，删除。
不知道是否有人还在检查这个线程，但我想我会分享我所做的。无法直接显示预览，但您可以创建所选文件的 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/
| 归档时间： |
|
| 查看次数： |
49923 次 |
| 最近记录： |