If you are creating an image uploader, you can provide thumbnail preview of currently selected images in file input field. We don’t need to upload entire file to server to do that. File API is supported by all modern browsers, we just need to take advantage of this feature, it provides us with information about files and allows to access their content.
Let’s start by dropping HTML code within the body of the page. HTML contains an input field and a DIV element which will output the thumbnails.
When user selects file for upload, we will make sure user browser supports File API, and then we loop though all queued files reading their contents and appending them to the output element.
Finally using CSS we need to scale down images output, because the images are still full size and giving them new width or height will resize images to thumbnail version.