t0-dataURL

by SerGen

HTML

<input type="file" id="i" multiple>
<output id="o"></output>

CSS

body {
    margin: 0;
}
img {
    vertical-align: middle;
    width: 150px;
    height: auto;
}
output {
    display: block;
    margin-top: 1em;
}

JavaScript

var i = document.getElementById('i');
var o = document.getElementById('o');

i.addEventListener('change', function () {
    var files = this.files;
    
    o.innerHTML = '';
    
    for (var i = 0, f; i < files.length; i++) {
        f = files[i];
        
        // если загружается картинка
        if (f.type.match('image.*')) {
            
            // читаем файл, добавляем его миниатюру
            var reader = new FileReader();
            
            reader.onload = function(e) {
                var img = document.createElement("img");
                img.src = e.target.result;
                o.appendChild(img);
            }
            reader.readAsDataURL(f);
        }
    };
})