Preview PDF file before upload using jQuery in ASP.Net

George61...

SOLVED CLOSED ACTIVE ANSWERED
User: George616
Posted: on Nov 02, 2020 01:52 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 13491
Sample Code: Download

It looks like every uploaded file comes in image (jpg or png) file format; but is there any way to upload a file and make it come in the original file format?

For example if the file format uploaded is a PDF file, then it should preview PDF file on the page

              <div class="form-horizontal">
                  <h1 style="font-size:12pt; margin-top: 0%; color: red;">Document Upload</h1>
                  <hr />
                  <div class="row" id="centered2" style="margin: 0 auto; margin-top: 1%; text-align: center;">
                       <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);"/>
                  <div>
                       <asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Font-Size="X-Small" BackColor="SteelBlue" Text="Authenticate" OnClick="Button2_Click"/>&nbsp;
                      <asp:TextBox ID="Textmail" placeholder="email address" Width="200px" Font-Size="10pt" runat="server"></asp:TextBox>&nbsp;
                       <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Font-Size="X-Small" BackColor="SteelBlue" Text="Send to Mail" OnClientClick="return PrintPanel();"/>&nbsp;
                      <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Font-Size="X-Small" Text="Print" OnClick="btnPrint_Click" />
                  </div>
                      &nbsp;&nbsp;&nbsp;<asp:Label ID="lblMessage" Text="" runat="server"></asp:Label>
                  </div>
                  <asp:Panel ID="pnlContents" runat="server">
                      <div class="page" id="parent">
                          <div class="subpage">
                              <asp:Image ID="Image3" ImageUrl="~/img/background.png" runat="server" BorderStyle="none" Width="160mm" Height="200mm" />
                              <asp:Image ID="Image4" ImageUrl="~/img/blue.png" runat="server" BorderStyle="None" Width="86px" Height="90px" />
                          </div>
                      </div>
                  </asp:Panel>
              </div>

   <script type="text/javascript">
       function ImagePreview(input) {
           if (input.files && input.files[0]) {
               var reader = new FileReader();
               reader.onload = function (e) {
                   $('#<%=Image3.ClientID%>').prop('src', e.target.result)
                       .width(590)
                       .height(750);
               };
               reader.readAsDataURL(input.files[0]);
           }
       }
   </script>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 15

Reply
ANSWER
User: dharmendr
Replied: on Nov 06, 2020 07:16 AM
Modified: on Nov 07, 2020 03:52 AM
Report

Hi George616,

Refer below sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="mid-cont">
            <asp:FileUpload runat="server" ID="showPreviewBill" />
            <br />
            <p>
                <canvas id="the-canvas" style="border: 1px solid black; height: 300px; width: 300px;"></canvas>
            </p>
        </div>
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#showPreviewBill").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        showInCanvas(e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            function convertDataURIToBinary(dataURI) {
                var BASE64_MARKER = ';base64,';
                var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
                var base64 = dataURI.substring(base64Index);
                var raw = window.atob(base64);
                var rawLength = raw.length;
                var array = new Uint8Array(new ArrayBuffer(rawLength));

                for (i = 0; i < rawLength; i++) {
                    array[i] = raw.charCodeAt(i);
                }
                return array;
            }

            function showInCanvas(url) {
                'use strict';
                var pdfAsArray = convertDataURIToBinary(url);
                pdfjsLib.getDocument(pdfAsArray).then(function (pdf) {
                    pdf.getPage(1).then(function (page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                });
            }
        });
    </script>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Preview PDF file before upload using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us