<input type="file" name="file" id="file" accept="image/*,.pdf">で取得したPDFファイルをFileReaderで表示できない。

Question

<input type="file" name="file" id="file" accept="image/*,.pdf">で取得した.PDFファイルをブラウザ上に表示したい。

発生している問題・エラーメッセージ

.png, .Jpgファイルは表示できるのに、.pdfファイルは表示できない。

該当のソースコード

　　<div >
        <input type="file" name="file" id="file" accept="image/*,.pdf"　capture="camera">
        <img src="" alt="" id="preview02" cmanOMat="move">
    </div>
    
    <script src="preview02.js" charset="utf-8"></script>

Javascript(preview02.js)

　document.querySelector("#file").addEventListener("change", function(e){
	 const file = e.target.files[0];
     const filereader = new FileReader();
     filereader.addEventListener("load",function(event){
  	　document.querySelector('#preview02').setAttribute("src", event.target.result);
  　　　});
  　　　filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
　　　});

試したこと

accept="image/,.pdf"をaccept="image/,application/pdf"にしてみたが表示されない。

補足情報（FW/ツールのバージョンなど）

OS:Windows10

Comments

[Lhankor_Mhy]

発生している問題は何ですか？

[AtyAty]

<input type="file" name="upload_file" id="file2" >
<object data="{path_to_file}" id="objects2" width="500px" height="500px">
をブラウザ上でマウスで自由移動させたいのですが、その設定ができないという問題です。

[Lhankor_Mhy]

一から作る方法を教えてほしい、ということですか？

[AtyAty]

cmanOMat="move"を使用して今ある内容にどう加えたらできるのか知りたいのですが、手掛かりがなく・・　根本的に内容を改めた方が良いかもしれないと思い、pdf.jsを使用して表示する方法にしようかと考えています。　お手数おかけし申し訳ございません。

[AtyAty]

当方独学でしているもので、こちらで質問させていただきました。

[Lhankor_Mhy]

> cmanOMat="move"を使用して今ある内容にどう加えたらできるのか知りたい

であれば、そのコードのご提示と、どのような問題が起きているかをご提示いただいた方がいいかもしれません。（たとえば、ドラッグしようとしても移動しない、XXXというエラーが出る、など）

[AtyAty]

表題を変えてみました。

[AtyAty]

コードは現在提示している内容になります・・

[Lhankor_Mhy]

うーん、たとえば、

>JSファイルの中のvar wTargetTag = [ 'img', 'div'];にinput、objectのタグを追加してみた。

ですが、ここでカンマを打ち忘れている、とかが原因かもしれませんよね。
でも、そのコードは提示されていないので、もしそうであったら、回答者は問題を再現できないですよね？

「質問者と回答者が同じコードを見る」というのは、問題を解決するのに意外と大事なことなんです。
それが実現されていないと、こういうことが起きたりします。
https://twitter.com/lhankor_mhy/status/1169432868705075200
https://twitter.com/lhankor_mhy/status/1172074711838150656

[AtyAty]

ありがとうございます。質問の内容がちぐはぐだというのは理解できましたｗ　
質問内容を改めようと思います！ガラッと変わるかと思いますが、ご了承くださいませ

Answer 1

document.querySelector("#myPdf02").addEventListener("change", function(e){
	const file = e.target.files[0];
  const filereader = new FileReader();
  filereader.addEventListener("load",function(event){
  	document.querySelector('#preview02').setAttribute("src", event.target.result);
  });
  filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
});



// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';$("#myPdf02").on("change", function(e){
  var file = e.target.files[0]
  if(file.type == "application/pdf"){
    var fileReader = new FileReader();  
    fileReader.onload = function() {
      var pdfData = new Uint8Array(this.result);
      // Using DocumentInitParameters object to load binary data.
      var loadingTask = pdfjsLib.getDocument({data: pdfData});
      loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
        console.log('Page loaded');        var scale = 1.5;
        var viewport = page.getViewport({scale: scale});        // Prepare canvas using PDF page dimensions
        var canvas = $("#pdfViewer02")[0];
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
          console.log('Page rendered');
        });
        });
      }, function (reason) {
        // PDF loading error
        console.error(reason);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
});

html

<input type="file" name="file" id="myPdf01" accept=".png, .jpg, .jpeg, .pdf, .doc" capture="camera">
<img src="" alt="" id="preview01" cmanOMat="move"></img>
<canvas id="pdfViewer01" cmanOMat="move"></canvas>

Comments

[kuma_kuma_]

IE11でも動きますか？

Answer 2

iframe、objectとためし、最終的にcanvasでの実装がうまくいきました。

Answer 3

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script>
	window.onload = function(){
		document.getElementById("file").addEventListener("change", function(e){
			var file = e.target.files[0];
			var filereader = new FileReader();
			filereader.onload = function() {
				document.getElementById("pdf").src = filereader.result;
			};
			filereader.readAsDataURL(file);
		});
	}
	</script>
</head>
<body>
　　<div >
        <input type="file" id="file" accept="image/*,.pdf"　capture="camera">
		<iframe id="pdf" src="about:blank" width="500" height="500">
		</iframe>
    </div>
</body>
</html>

Comments

[AtyAty]

ありがとうございます。