28

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.

Danyal Aytekin
  • 4,106
  • 3
  • 36
  • 44
Seedorf
  • 665
  • 3
  • 13
  • 28
  • possible duplicate of [Get size of file requested via ajax](http://stackoverflow.com/questions/1484303/get-size-of-file-requested-via-ajax) – user2284570 Sep 15 '14 at 18:46

5 Answers5

48

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"));
    }
  });
masto
  • 1,366
  • 9
  • 7
  • I was basically writing an answer suggesting a HEAD request, but you beat me too it. May help to show code to do it with/without the plugin. – eyelidlessness Sep 17 '09 at 19:15
  • Awesome, but devs should notice that domain privacy take place here :) – ValeriiVasin Jul 21 '12 at 12:42
  • To what @InviS was saying, try using `http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js`, which is on another domain – vol7ron Aug 09 '13 at 16:34
  • @vol7ron No matter from what domain your .js file has been loaded. It works on your domain. And if your site has domain a.com and you are going to fetch data from b.com using AJAX, you should add `xhrFields: { withCredentials: true }` field to ajax options, look at [jQuery.ajax](http://api.jquery.com/jQuery.ajax/) for details, and server should respond with correct `Access-Control-Allow-Origin` field – ValeriiVasin Aug 09 '13 at 20:11
  • @InviS That's not cross-domain. I was giving an example to your statement. I don't think `withCredentials` will work with that google cdn :) – vol7ron Aug 09 '13 at 22:52
  • 1
    I've just found that not all the servers send the Content-Length header :( – Luca Reghellin Nov 22 '13 at 17:54
12

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>
Slipstream
  • 13,455
  • 3
  • 59
  • 45
Sekar Ramamurthy
  • 139
  • 1
  • 2
0

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

fileInput.files[0].size

Saeven
  • 2,280
  • 1
  • 20
  • 33
0

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.

Chetan S
  • 23,637
  • 2
  • 63
  • 78
0

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.

Corey Sunwold
  • 10,194
  • 6
  • 51
  • 55