<style>

  img { max-height: 100px; max-width: 100px; }

</style>

<input type="file" id="files" multiple accept="image/*"/>

<div></div>

​

<script>

  function toArray(list) {

    return Array.prototype.slice.call(list || [], 0);

  }

  function render(file, dataURL) {

    var span = document.createElement('span');

    span.innerHTML = ['<img src="', dataURL, '" title="', file.name, '">'].join('');

    document.querySelector('div').insertBefore(span, null);

  }

​

  function handleFiles(files, callback) {

    var results = [];

    files.forEach(function(file, i) {

      var reader = new FileReader();

​

      // Closure to capture the file information.

      reader.onload = function(e) {

        var result = e.target.result;

        results.push(result);

        render(file, result);

        if (results.length == files.length) {

          callback(results);

        }

      };

      reader.readAsDataURL(file);

    });

  }

​

  document.querySelector('[type="file"]').addEventListener('change', function(e) {

    handleFiles(toArray(e.target.files), function(results) {

      console.log('Done! ' + e.target.files.length + '/' + results.length + ' files read');

    });

  }, false);

</script>