using jquery to determine total file size
<p>when I define the file as a variable with  jquery selector I get this error :
Uncaught TypeError: Array.prototype.map called on null or undefined. if I use :</p>

<pre><code>var file = document.getElementById('file'); 
</code></pre>

<p>instead of </p>

<p><code>var file = $('#file').val();</code> </p>

<p>then it works, but I'm curious why using jquery selector doen't work. Thanks</p>

<pre><code>$('#file').on('change', function(){

  var file = $('#file').val();
      var sizes = [].map.call(file.files, function(v) {return v.size;});
      var totalSize = sizes.reduce(function(a, b) {return a + b;}, 0);
 });
</code></pre>
