ファイル選択時に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にファイルのパスを指定することで表示されます。