I'm trying to load several images by a drop action and than resizing them and adding them as a thumbnail. The resize part is very important because the images can be very large and I want to make the thumbnails small of size.

Here is my code:

loadingGif(drop);

for (var i=0;i<files.length;i++) {
    var file = files[i];
    var reader = new FileReader();          

    reader.onload = function(e) {
        var src = e.target.result;

        var img = document.createElement('img');            
        img.src = src;
        var scale = 100/img.height;
        img.height = 100;
        img.width = scale*img.width;    

        output.push('<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');

        if(output.length == files.length) {
            drop.removeChild(drop.lastChild);
            drop.innerHTML += output.join('');
            output.length = 0;
        }
    }

    reader.readAsDataURL(file);
}

As you can probably tell I insert a loading gif image in my dropzone until all files are loaded (output.length == files.length). When a file is loaded I add html to an array which I will print if the load is complete. The problem is I can't seem to add the img object (I need this object to resize the image) to the html string, which seems obvious as the img is an object... So my question to you guys is: how do I do this? :)