title: How can I get the filename from the FileReader function in a Multiple Input?
body: <p>I have the following code:</p>
  
  <pre><code>&lt;input type="file" multiple='multiple'&gt;
  &lt;div id="thumbs"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $('input[type="file"]').change(function() {
      $('#thumbs').html('');
      $.each(this.files, function() {
      readURL(this);
   })
  });
  
  function readURL(file) {
      var reader = new FileReader();
      reader.onload = function(e) {
      $('#thumbs').append('&lt;img src="' + e.target.result + '" width="20%"&gt;')
      $('#quantity').text(i)
    }
    reader.readAsDataURL(file);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is a multiupload input. When I select 'x' pictures, it creates thumbnails for them. That works perfectly, but I want to know how can I get the files name (if a picture is named "sun.jpg", I want to get "sun"), and append them bellow to the picture. I've tried this: </p>
  
  <pre><code>$('#thumbs').append('&lt;img src="' + e.target.result + '" width="20%"&gt;&lt;p&gt;'+e.name+'&lt;/p&gt;')
  </code></pre>
  
  <p>But <code>e.name</code> is <code>undefined</code>.</p>
  
  <p>Here is a fiddle of everything: <a href="https://jsfiddle.net/ugs6rzqx/1/" rel="nofollow">https://jsfiddle.net/ugs6rzqx/1/</a></p>
  
  <p>Any help would be appreciated. Thanks.</p>