SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Getting PDF Size and Posting

    Hello,

    I don't know if this is JS, but I think the DOM would help do it....

    Anyhow... I link to a lot of PDF files statically for a website I maintain. Is there any way to use JS or PHP to find out if the file is a PDF in the link, then add the file size to the link text dynamically?

    for example.... <a href="pdflink.pdf" target="_blank">PDF LINK $size</a>, but with out me adding $size everytime?

    I know how to get the file size in PHP... just seeing if there is a quicker way more efficient way with the DOM for every PDF a href...

    Thanks!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres something I knocked up for you. I'm quite proud of it as well.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
                function locatePDFS() {
                    var urls = document.getElementsByTagName('A');
                    for(var i = 0; i < urls.length; i++) {
                        if(urls[i].href.toLowerCase().indexOf('pdf') > -1) {
                            getFileSize(urls[i].href, urls[i]);
                        }
                    }
                }
                function getFileSize(url, el) {
                    var request = createXMLHttpRequest();
                        request.open("GET", url, true);
                        request.onreadystatechange = function() {
                            if (request.readyState == 4) {
                                if(request.status == 200) {
                                    var fileSize = parseInt(request.getResponseHeader('Content-Length')) / 1024;
                                    el.innerHTML += ' (' + Math.round(fileSize) + ' kb)';            
                                } else {
                                    alert('ReadyState: ' + request.readyState + '\nStatus: ' + request.status);
                                }
                            }
                        }
                        request.send(null);
                }
                function createXMLHttpRequest() {
                    if (typeof XMLHttpRequest != "undefined") {
                        return new XMLHttpRequest();
                    } else if (typeof ActiveXObject != "undefined") {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } else {
                        throw new Error("XMLHttpRequest not supported");
                    }
                }
    
                window.onload = locatePDFS;
            </script>
        </head>
        <body>
            
            <a href="http://www.ncctq.org/ModelComponentsMatrix.pdf">http://www.ncctq.org/ModelComponentsMatrix.pdf</a> <br />
            <a href="http://www.rdes.it/riv3_legge210.pdf">http://www.rdes.it/riv3_legge210.pdf</a> <br />
            <a href="http://www.forrest19.com/flbro.pdf">http://www.forrest19.com/flbro.pdf</a> <br />
            <a href="http://www.sitepoint.com/forums/">http://www.sitepoint.com/forums/</a> <br />
            <a href="http://www.domain.com/filename.PDF">http://www.domain.com/filename.PDF</a> <br />
    
        </body>
    </html>
    What happens is when the page loads, it goes away and gets every link within the page. It then checks each link for the existance of pdf. If it finds a file with 'pdf' in it will then use AJAX to go away and load that file. By doing that, the response also returns a Content-Length header which tells us the size of the pdf.

    Not sure whether this is the best way, as it has to load each and every PDF file to get its size, but it certainly works.


  3. #3
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Insane! Thanks for brewing that up!

    However, I am not sure where the data is being shown? I see the alert(), but nothing is being displayed when I run the page?

    Do I need to do something else?

    EDIT:::::
    OH! The PDF's aren't real..... This works awesome! Thanks so much.
    Last edited by buildakicker; Jul 27, 2007 at 09:03. Reason: I'm an IDIOT
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  4. #4
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Real quick here, I am learning JS, how are you placing the Size at the end of the Link?
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The PDF's are real, otherwise they wouldn't return a size. IE works for me, but Firefox throws a boo boo because it doesn't allow cross-domain ajax calls (strange).

    I have managed to get around this but it requires the user to allow it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
                function locatePDFS() {
                    var urls = document.getElementsByTagName('A');
                    for(var i = 0; i < urls.length; i++) {
                        if(urls[i].href.toLowerCase().indexOf('pdf') > -1) {
                            getFileSize(urls[i].href, urls[i]);
                        }
                    }
                }
                function getFileSize(url, el) {
                    var request = createXMLHttpRequest();    
                if(typeof(netscape) != 'undefined' && typeof(netscape.security) != 'undefined') {
                    netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
                }
                        request.open("GET", url, true);
                        request.onreadystatechange = function() {
                            if (request.readyState == 4) {
                                if(request.status == 200) {
                                    var fileSize = parseInt(request.getResponseHeader('Content-Length')) / 1024;
                                    el.innerHTML += ' (' + Math.round(fileSize) + ' kb)';            
                                } else {
                                    alert('ReadyState: ' + request.readyState + '\nStatus: ' + request.status);
                                }
                            }
                        }
                        request.send(null);
                }
                function createXMLHttpRequest() {
                    if (typeof XMLHttpRequest != "undefined") {
                        return new XMLHttpRequest();
                    } else if (typeof ActiveXObject != "undefined") {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } else {
                        throw new Error("XMLHttpRequest not supported");
                    }
                }
    
                window.onload = locatePDFS;
            </script>
        </head>
        <body>
            
            <a href="http://www.ncctq.org/ModelComponentsMatrix.pdf">http://www.ncctq.org/ModelComponentsMatrix.pdf</a> <br />
            <a href="http://www.rdes.it/riv3_legge210.pdf">http://www.rdes.it/riv3_legge210.pdf</a> <br />
            <a href="http://www.forrest19.com/flbro.pdf">http://www.forrest19.com/flbro.pdf</a> <br />
            <a href="http://www.sitepoint.com/forums/">http://www.sitepoint.com/forums/</a> <br />
            <a href="http://www.domain.com/filename.PDF">http://www.domain.com/filename.PDF</a> <br />
    
        </body>
    </html>
    if thats not an option, you could redirect the original url through PHP. But then again its probably always going to be easier to use PHP to get the file size, and then use ajax to display the data.

    See the bold text in the script above to see how I am appending the Size to the end of the link.



Bookmarks

Posting Permissions

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