dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Preview PDF before posting

  1. #1
    Join Date
    Sep 2017
    Location
    Haddon Heights NJ
    Posts
    60

    Preview PDF before posting

    I have a form that post a file to a database. I want to be able to preview the file, before the user presses the submit button. I have posted here below a test page that i'm using. I can, using the jquery function preview jpgs but it does not display pdf. Once the file is on the server I can put the pdf on small div for the user to see, so I know that this work. Can anyone help?

    HTML Code:
    </head>
        <body>
    	<form enctype="multipart/form-data" action="saveFile.php" method="post">
    	    <input id="inputFile" type="file" name="filePDF"/>
    	    <div id="container">
    		<object id="image" src="ssseng.pdf"></object>
    	    </div>   
    	    <button id="upload">Upload</button>
    	</form>
    	<script>
    	    
    	    $("#inputFile:file").change(function(){
    		var preview=document.querySelector('object');
    		var file=document.querySelector('input[type=file]').files[0];
    		var reader=new FileReader();
    		
    		reader.addEventListener("load", function(){
    		    preview.src = reader.result;
    		}, false);
    		reader.readAsDataURL(file);
    	    });
    	    
    
    	</script>
        </body>
    </html>

  2. #2
    Join Date
    Dec 2012
    Posts
    1,556
    Check if this tutorial helps you:
    http://usefulangle.com/post/20/pdfjs...t-prev-buttons

  3. #3
    Join Date
    Sep 2017
    Location
    Haddon Heights NJ
    Posts
    60
    At least the test, does what i want. I have been googling for a while and i have not run into this tutorial. I going to give it a try, will post with results. Thanks for the help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center