Find size of file behind download link with jQuery

Question

I was wondering if there was a way to use jQuery to find out the file size for a PDF that i'm linking to a webpage.

I want to make it so that on hovering over the download link, a modal box pops up saying the file size of the PDF. I can do the second bit, the only thing i'd like to know is how to find out the file size. I dont know if jQuery is capable of this. If not then too bad i guess..

Cheers in advance.

Answer 1

I feel like this is too much to be doing client-side, but I don't know the details of your application, so presuming you have to do it with jQuery... you can do a HEAD request and look at the Content-Length header. Earlier I recommended the jqHead plugin, but after I tried to use it I found that it was broken.

Here's a working example that doesn't depend on any extra plugins: http://host.masto.com/~chris/so/jqhead.html

The meat of it is very simple:

  var request;
  request = $.ajax({
    type: "HEAD",
    url: $("#url").val(),
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

Answer 2

Here is working snippet to find the file size in javascript without going to the server, if you are about to upload the file to the server.

This idea helps to restrict the file size before uploading big files to the server.

<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
    function findSize() {
        var fileInput = $("#loadfile")[0];
        alert(fileInput.files[0].size); // Size returned in bytes.
    }    
</script>

Answer 3

If you know the file size beforehand, you can put that in the title attribute of the download link. You can also use jQuery to show a custom popup.

Otherwise, there is no way to get just the file size (content-length) of a URL without actually downloading the whole content AFAIK.

Answer 4

The only way that I can think of to do this would be to create a web service that would return you the filesize of the PDF.

Answer 5

In the answer above, Chrome 21 and Safari 6 did not have a fileSize member, but does have size. Use:

fileInput.files[0].size