Generating thumbnails through FileReader

You should not use for .. in to iterate over arrays (or array-likes ). It is used to iterate over the properties of an object. Since your FileList has three properties ( "0" , "length" and "item" ) the code will execute three times.

Replace with% common%:

for (var key = 0 ; key < files.length ; key++)

Updated example .

The problem is the use of for (... in ...) , which also reads the properties of the array of files, such as length . That is, you are adding an image when the length property is iterated!

EDIT An aid to generate the thumb:

Just to supplement the response, you can resize the img element to maintain the proportions of the original image by setting the following style for it:

max-width: 20px; /* qualquer largura máxima desejada */
width: auto;
height: auto;