やりたいこと
ローカルからpdfやpngファイルを選択したときに、ファイルの内容を表示したい
また、「ファイル選択」→「キャンセル」と操作したときにファイル内容を非表示にしたい。
やり方
jQueryを使ったやり方を紹介します。以下のコードをそのままコピペしても動作します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <title> ローカルファイルのサムネ表示 </title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://code.jquery.com/jquery-3.5.1.min.js">//jQueryのCDN</script> </head> <body> <input type="file" name="file" class="files"> <object class="pdfobj"></object> </body> <script> //changeイベントを設定 $('input[name="file"]').on("change", function (e) { var fileData = e.target.files[0]; //ファイル選択の状態で分岐 if (fileData == undefined) { console.log("ファイル選択でキャンセルが選択されました"); var object = $(this).parents().children('object').get(0); object.setAttribute("data", ""); } else { console.log("ファイル選択されました"); var object = $(this).parents().children('object').get(0); var reader = new FileReader(); reader.onload = function () { object.setAttribute("data", reader.result); } reader.readAsDataURL(fileData); } }); </script> </html> |