Web Development with jQuery®

(^312) ❘ CHAPTER 11 HTML5 DRAG AND DROP
The thumbnail creation begins by creating a new element. The fi le is assigned to the fi le
property of the element.
var img = document.createElement('img');
img.file = file;
The element is added to the element with the classname finderDragAndDropDialogue-
FileIcon with a call to html().
tr.find('td.finderDragAndDropDialogueFileIcon')
.html(img);
The FileReader object is instantiated, which plays the critical role of reading the fi le to display the
image, which is ultimately scaled down to thumbnail size by the style sheet.
var reader = new FileReader();
An onload event is created that assigns the src attribute of the element; each image src
is created using data URIs. The FileReader object provides a base64-encoded data URI representa-
tion of the image, which is assigned to the src attribute, thus making it possible to preview each
image fi le.
reader.onload = function(event)
{
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
Each fi lename is placed inside the with the classname finderDragAndDropDialogueFile.
tr.find('td.finderDragAndDropDialogueFile')
.text(file.name);
And each fi le size is converted from bytes to a human-readable number in one of bytes, kilobytes,
megabytes, and such depending on the size of the number by virtue of a call to dragAndDrop.
getFileSize(). The resulting value is placed inside the element with the classname
finderDragAndDropDialogueFileSize.
tr.find('td.finderDragAndDropDialogueFileSize')
.text(this.getFileSize(file.size));
The file.name is assigned to the title attribute of the element.
tr.attr('title', file.name);
Finally, the completed template is added to the element.
$('div#finderDragAndDropDialogueFiles tbody').append(tr);
},
http://www.it-ebooks.info