t1-objectURL

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];
        
        var URL = window.URL || window.webkitURL;
        
        // если есть нужный метод и загружается картинка
        if (URL.createObjectURL && f.type.match('image.*')) {
            
            // получаем ссылку на файл
            var imgURL = URL.createObjectURL(f);
            var img = document.createElement("img");
            
            // избавляемся от ненужной ссылки
            img.onload = function(e) {
                window.URL.revokeObjectURL(this.src);
            }
            
            // начинаем загружать файл
            img.src = imgURL;
            
            // добавляем миниатюру
            o.appendChild(img);
        }
    };
})