ファイル選択時にPDFのサムネイル表示

概要

ファル選択時にPDFのサムネイルの表示する方法をまとめました。

背景

①新規登録画面：ファイルをブラウザにアップロードしたファイルの表示
②更新画面：新規登録時にアップロードし、保存したファイルの表示
②の場合は、ファイルのパスを指定すれば表示することは簡単にてきます。
①の場合は、サーバー上にファイルが保存されていないので、ファイルパスを指定できません。サーバー上に保存されていないファイルのサムネイルを②同様、表示したいと思いました。

方法

ファイル選択後にサムネイルtを表示するためにHTML5のFileAPIの機能を使います。
FileAPIはローカルファイルを直接読み込むことができます。
また、サムネイルをセットするHTMLタグについてですが、画像を表示する際は、一般的にはimgタグを使用するかと思います。今回はPDFということで、objectタグを使用します。

実装例

・ｊQuery読み込み

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>

・html

index.html

<div>
  <input type="file" name="upload_file" class="files"/>
  <object></object>
</div>

・javascprit

$('.files').change(function(e) {

    // ファイル情報を取得
    var fileData = e.target.files[0];

    //サムネイル表示エリアのエレメント取得
    var object = $(this).parent().children('object').get(0);

    // FileReaderオブジェクトを使ってファイル読み込み
    var reader = new FileReader();
    // ファイル読取り成功時処理
    reader.onload = function() {

        //ノードの複製
        var cln = object.cloneNode(true);

        //複製したノードのdata要素をにFileAPIの読み込み結果をセット
        cln.setAttribute("data",reader.result);

        object.parentNode.replaceChild(cln, object);
    }
    // ファイル読み込みを実行
    reader.readAsDataURL(fileData);
});

これでファイル選択することでPDFのサムネイル表示が実現できます。

既にサーバ上にあるPDFファイルを表示する場合についても紹介します。

index.html

<div>
  <input type="file" name="upload_file" class="files"/>
  <object data="{path_to_file}"></object>
</div>

dataにファイルのパスを指定することで表示されます。