Я использую API файлов HTML5 для загрузки документа (.doc/.docx/.pdf). И я хочу показать этот предварительный просмотр документа перед его загрузкой на сервер. Есть ли способ сделать это на стороне клиента?
P.S. Google Docs Viewer не работает, потому что для доступа к нему требуется доступ из Интернета.
Нет. Это невозможно.
Вы хотите, чтобы браузер не просмотрел файл данных, который он не должен. У вас есть Office или PDF зрители (ОК, предоставлено, PDF ssems, чтобы быть внутри браузеров сейчас...), чтобы просмотреть ваши файлы данных.
Если вы хотите показать предварительный просмотр в браузере, вам нужно сначала загрузить его и сохранить его в директории "for-preview" или что-то в этом роде. Когда ОК, переместите его в конечный пункт назначения, в противном случае удалите.
Я попытался создать небольшой пример, и перед загрузкой файла 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>
File API позволит вам прочитать данные из файла, но тогда у вас возникнет проблема в его синтаксическом анализе и его рендеринге. Mozilla выпустила просмотрщик JavaScript PDF, но я ничего не знаю о файлах 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
Не уверен, что кто-то все еще проверяет этот поток, но я думал, что поделюсь тем, что сделал. Непосредственное отображение предварительного просмотра невозможно, но вы можете создать объект 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/