Getting PDF Size and Posting

**buildakicker** · Jul 26, 2007 16:14

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!

**gRoberts** · Jul 27, 2007 02:31

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.

**buildakicker** · Jul 27, 2007 10:01

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.

**buildakicker** · Jul 27, 2007 10:04

Real quick here, I am learning JS, how are you placing the Size at the end of the Link?

**gRoberts** · Jul 27, 2007 11:49

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.

User Tag List

Thread: Getting PDF Size and Posting

Thread Tools

Display

Getting PDF Size and Posting

Bookmarks

Bookmarks

Posting Permissions