Multiple FIleReader Instances

Created as answer for http://stackoverflow.com/questions/4100927/chrome-filereader

by Jonathan Sampson

HTML

<input type="file" id="collection" multiple /><br/>

JavaScript

if ( window.FileReader ) {
 
    document.getElementById("collection").onchange = function(){
     
        var counter = -1, file;
        
        while ( file = this.files[ ++counter ] ) {
         
            var reader = new FileReader();
 
            reader.onloadend = (function(file){
                
                return function(){

                    var image = new Image();
    
                    image.height = 100;
                    image.title = file.name;
                    image.src = /^image/.test(file.type) 
                        ? this.result 
                        : "http://i.stack.imgur.com/t9QlH.png";
    
                    document.body.appendChild( image );
                    
                }
                    
            })(file);
                
            reader.readAsDataURL( file );
            
        }
        
    }
    
}