How to show linked file size and type in title attributes using jquery?

Question

For example:

Before

<a 
target="_blank" 
href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"&gt;
Adobe Reader JavaScript specification 
</a>

Bcoz file is PDF so title should be title="PDF, 93KB, opens in a new window"

<a
title="PDF, 93KB, opens in a new window" 
target="_blank" 
href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf" >
Adobe Reader JavaScript specification
</a>

Answer 1

Take a look at this, http://stackoverflow.com/questions/1440723/find-file-size-with-jquery

From that post you can do something like:

<a title="PDF, 93KB, opens in a new window"  target="_blank"  href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"
> Adobe Reader JavaScript specification </a>

$('a').each(function() {
  var request;
  request = $.ajax({
    type: "HEAD",
    url: $("#url").val(),
    success: function () {
      $(this).attr('title', request.getResponseHeader("Content-Length"));
    }
  });
});

Answer 2

Like duirlai said, take a look at http://stackoverflow.com/questions/1440723/find-file-size-with-jquery.

Then the way you update your title with jQuery is like this...

$(function() {
  $("a[href$='.pdf']").each(function(i, obj) {
    var link = $(obj);
    $.ajax({
      type: "HEAD",
      url: link.attr("href"),
      success: function() {
        var length = request.getResponseHeader("Content-Length");
        if (!isNaN(parseInt(length))) {
          var fileSize = readablizeBytes(length);
          link.attr("title", "PDF, "+ fileSize  +", opens in a new window");
        }
      }
    })
  })
});

// From http://web.elctech.com/2009/01/06/convert-filesize-bytes-to-readable-string-in-javascript/
function readablizeBytes(bytes) {
  var s = ['bytes', 'kb', 'MB', 'GB', 'TB', 'PB'];
  var e = Math.floor(Math.log(bytes)/Math.log(1024));
  return (bytes/Math.pow(1024, Math.floor(e))).toFixed(2)+" "+s[e];
}