Предварительный просмотр .doc/.docx/.pdf файлов перед загрузкой на сервер

Я использую API файлов HTML5 для загрузки документа (.doc/.docx/.pdf). И я хочу показать этот предварительный просмотр документа перед его загрузкой на сервер. Есть ли способ сделать это на стороне клиента?

P.S. Google Docs Viewer не работает, потому что для доступа к нему требуется доступ из Интернета.

Ответ 1

Нет. Это невозможно.

Вы хотите, чтобы браузер не просмотрел файл данных, который он не должен. У вас есть Office или PDF зрители (ОК, предоставлено, PDF ssems, чтобы быть внутри браузеров сейчас...), чтобы просмотреть ваши файлы данных.

Если вы хотите показать предварительный просмотр в браузере, вам нужно сначала загрузить его и сохранить его в директории "for-preview" или что-то в этом роде. Когда ОК, переместите его в конечный пункт назначения, в противном случае удалите.

Ответ 2

Я попытался создать небольшой пример, и перед загрузкой файла 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"/>&nbsp;
        <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>

Ответ 3

File API позволит вам прочитать данные из файла, но тогда у вас возникнет проблема в его синтаксическом анализе и его рендеринге. Mozilla выпустила просмотрщик JavaScript PDF, но я ничего не знаю о файлах MS Office.

Ответ 4

В те дни, когда вы могли сделать что-то подобное:

<object data="word.doc">You do not have Word installed on your machine</object>

Не уверен, что это все еще поддерживается, но если это так, вы можете использовать JS для ввода этого объекта на страницу, чтобы просмотреть его.

Ответ 5

Ajax загрузит ваш файл, а затем выгрузите имя пути возврата и просмотрите его.

blueimp jQuery-File-Upload был для меня отличным.

вы можете просмотреть его основной плагин.

https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Ответ 6

Не уверен, что кто-то все еще проверяет этот поток, но я думал, что поделюсь тем, что сделал. Непосредственное отображение предварительного просмотра невозможно, но вы можете создать объект 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/