Question

I have a requirement to parse through the entire content and find links and if the links have the extension like pdf, doc, xls, ppt then add the filetype and filesize next to the link.

I found an example of getting the file size using jQuery in Stack Overflow using getResponseHeader("Content-Length") but this one is always returning the same file size for every link.
Anyone has sample for this? Any help is highly appricated.

My current code (I am not checking the extensions still)

<script type="text/javascript">
    $(document).ready(
        function () {
            $('a').each(function (index, obj) {                    
                var eleHref = $(obj).attr('href');
                var extension = eleHref.substr((eleHref.lastIndexOf('.') + 1)).toUpperCase();
                var request;
                request = $.ajax({ type: "HEAD", url: $(eleHref).val(), success:
                function () {
                    $(obj).append(" (" + extension + ", " + parseFloat(request.getResponseHeader("Content-Length") / 1024).toFixed(2) + 'KB)');
                }
                });
            })             
        });            
</script>

Answer 1

Assuming your images/documents are on the same domain this should work.

$('a').each(function() {

  var $this = $(this)
    , href = $this.attr('href')
    , ext = /(jpg|png|gif|doc|ppt|xls)$/i.exec( href )
    , req;

  if ( ext.length ) {
    req = $.ajax({
      type: 'HEAD',
      url: href,
      success: function() {
        var size = +req.getResponseHeader('Content-Length') / 1024 + 'KB';
        $this.append('<span>Extension: '+ ext +'</span>')
             .append('<span>Size: '+ size +'</span>');
      }
    });
  }

});

Edit: If you want you can map the extensions to an object to pull more info:

var extensions = {
  ppt: 'Microsoft PowerPoint',
  doc: 'Microsoft Word',
  pdf: 'Adobe Portable Document Format',
  ...
};

And then:

...
$this.append('<span>Extension: '+ extensions[ ext ] +'</span>')
...