SE・プログラミングのあれこれ

【JavaScript・コピペでOK】ローカルファイルのサムネ表示

JavaScript

やりたいこと

ローカルからpdfやpngファイルを選択したときに、ファイルの内容を表示したい

また、「ファイル選択」→「キャンセル」と操作したときにファイル内容を非表示にしたい。

やり方

jQueryを使ったやり方を紹介します。以下のコードをそのままコピペしても動作します。

コード解説

name=”file_name” の名称は何でもいい。

objectタグにファイル内容を表示する。

jQueryを用いて、指定のinputタグに変更があったときに関数が実行されるよう設定。

選択ファイルの情報を取得。
var object =・・・ objectタグ(ファイル内容を表示する場所)を取得。

object.setAttribute(“data”, “”); dataに””を設定。第二引数(“”にあたる部分)がファイルの内容を指定する部分。

reader.readAsDataURL(); でファイルの内容を読み込んでから.onloadの関数を実行。

 

コード解説を閉じる