Home>
I want to display the .PDF file obtained byon the browser.
.png and .Jpg files can be displayed, but .pdf files cannot be displayed.
Corresponding source code
<Dib>
      <input type = "file" name = "file" accept = "image /*,.pdf" capture = "camera">
        
    
  <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);// Description for actually reading the file contents
});
What I tried

I tried changing accept = "image/*, .pdf" to accept = "image/*, application/pdf", but it is not displayed.

Supplementary information (FW/tool version, etc.)

OS: Windows 10

  • Answer # 1

    <! 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>
    <Dib>
          <input type = "file" id = "file" accept = "image /*,.pdf" capture = "camera">
            
        
    </body>
    </html>