Load Multiple Images Locally

<!--Based on code from http://www.html5rocks.com/en/tutorials/file/dndfiles/ -->
<html>
    <head>
        <style>
          .thumb {
            height: 75px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
          }
        </style>
    </head>
    <body>
        <input type="file" id="files" name="files[]" multiple />
        <hr>
        <div id="images"></div>


        <script>
          function loadFiles(event) {
            var files = event.target.files; // FileList object
            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0; f = files[i]; i++) {

              // Only process image files.
              if (!f.type.match('image.*')) {
                continue;
              }

              var reader = new FileReader();

              // Closure to capture the file information.
              reader.onload = (function(theFile) {
                return function(e) {
                  // Render thumbnail.
                    var a = '<a href="' + e.target.result + '" target="_blank">';
                    var b = '<img class="thumb" src="' + e.target.result;
                    var c = '" title="' + escape(theFile.name) + '"/></a>';
                  document.getElementById('images').innerHTML+=a+b+c;
                };
              })(f);

              // Read in the image file as a data URL.
              reader.readAsDataURL(f);
            }
          }

          document.getElementById('files').addEventListener('change', loadFiles, false);
        </script>
    </body>
</html>