javascript - How to generate thumbnail and file name from input type file and insert them in multiple element? -

i manage generate thumbnail via script below

$('input#fileupload').on('change', function() {    (var = 0; < this.files.length; i++) {     var fr = new filereader();     var name = this.files.item(i).name;      fr.onload = function(e) {       $('#thumbs ul').append('<li><img src="' + e.target.result + '"><span>' + name[i] + '</span></li>');     };      fr.readasdataurl(this.files[i]);   } }); 

but unable insert file name appended <li></li> element

the issue because you're using files.item(i).name invalid. instead need access files array index, name property.

also note when append variable in span, can use name directly, not name[i].

finally, you'll need use closure maintain scope of current file when in onload event handler. try this:

$('input#fileupload').on('change', function() {    (var = 0; < this.files.length; i++) {      (function(file) {        var name = file.name;        var fr = new filereader();        fr.onload = function(e) {          $('#thumbs ul').append('<li><img src="' + e.target.result + '"><span>' + name + '</span></li>');        };        fr.readasdataurl(file);      })(this.files[i])    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="file" id="fileupload" multiple="true" />    <div id="thumbs">    <ul></ul>  </div>