-
-
Save Kambaa/2afec0193ef803803a40c7c8109b7af0 to your computer and use it in GitHub Desktop.
Use jQuery to send a HEAD request with AJAX and get the size of a file without downloading it. This snippet places the size of the file in braces next to its name. The script issues a HEAD request, which only returns the headers and not the actual content of the file, which means that these requests are fast and lightweight.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Loop all .fetchSize links | |
| $('a.fetchSize').each(function() { | |
| // Issue an AJAX HEAD request for each one | |
| var link = this; | |
| $.ajax({ | |
| type: 'HEAD', | |
| url: link.href, | |
| complete: function(xhr) { | |
| var size = humanize(xhr.getResponseHeader('Content-Length')); | |
| // Append the filesize to each | |
| $(link).append(' (' + size + ')'); | |
| } | |
| }); | |
| }); | |
| function humanize(size) { | |
| var units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; | |
| var ord = Math.floor(Math.log(size) / Math.log(1024)); | |
| ord = Math.min(Math.max(0, ord), units.length - 1); | |
| var s = Math.round((size / Math.pow(1024, ord)) * 100) / 100; | |
| return s + ' ' + units[ord]; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Display files sizes next to download links</title> | |
| </head> | |
| <body> | |
| <a href="001.html" class="fetchSize">First Trickshot</a> | |
| <a href="034.html" class="fetchSize">This Trickshot</a> | |
| <a href="ball.png" class="fetchSize">Ball.png</a> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="filessizes.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment