javascript bootstrap - Preview.doc/.docx/.pdf files before uploading to server




simple html (6)

Not sure if anyone still checks this thread, but i thought i'd share what i did. Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):

$('#input').change(function (event) {
    var file = URL.createObjectURL(event.target.files[0]);
    $('element').append('<a href="' + file + '" target="_blank">' + event.target.files[0].name + '</a>');
});

This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works. Here's an example: https://jsfiddle.net/j9gw023b/3/

I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?

P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.



Back in the days you were able to do something like that:

<object data="word.doc">You do not have Word installed on your machine</object>

Not sure if this is still supported, but if so, you could use JS to inject that object onto the page to preview it.


I have tried to create little example and that would display PDF Preview before uploading PDF file.

<!DOCTYPE html>
  <html lang="en">
    <head>
        <title>JavaScript PDF Viewer Demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function PreviewImage() {
                pdffile=document.getElementById("uploadPDF").files[0];
                pdffile_url=URL.createObjectURL(pdffile);
                $('#viewer').attr('src',pdffile_url);
            }
        </script>
    </head>
    <body>
        <input id="uploadPDF" type="file" name="myPDF"/>&nbsp;
        <input type="button" value="Preview" onclick="PreviewImage();" />

        <div style="clear:both">
           <iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
        </div>
    </body> 
</html>

No. This is not possible.

You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.

If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.


var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

You can use form data to post all your values including images.





javascript jquery html5