034.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Avanzado</title>

    <!-- Estilo del Boostrap 4 -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/estilo.css">


  </head>
  <body>

    <h1>Algún texto</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
    </p>

    <a class="fetchSize" href="001.html">Archivo 001.html</a>
    <a class="fetchSize" href="034.html">Archivo 034.html</a>
    <a class="fetchSize" href="assets/img/ball.png">Pelota</a>


    <!-- Librería de jQuery -->
    <script src="assets/libs/jquery-3.min.js" charset="utf-8"></script>
    <script>

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

        var link = this;

        $.ajax({
          type: 'HEAD',
          url: link.href,
          complete: function(xhr){
            var size = xhr.getResponseHeader('Content-Length');
            size = humanizar(size);

            // append a los links
            $(link).append('('+ size +')');
          }

        });

      });

      function humanizar( size ){

        	var unidades = ['bytes','KB','MB','GB','TB'];

        	var ord = Math.floor( Math.log(size) / Math.log(1024) );
        	ord = Math.min( Math.max(0,ord), unidades.length -1 );

        	var s = Math.round(  (size/Math.pow(1024,ord)) * 100 ) / 100;
        	return s + ' ' + unidades[ord]

      }


    </script>


  </body>
</html>