How can I get the filename from the FileReader function in a Multiple Input?
<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>