mutiple select

Uses the input[type=file] with multiple option to make a preview of image files

by Michael Granados

HTML

<div id="images">Choose some files first</div>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>

CSS

#images {
    border: 1px solid #EEE;
    margin-bottom: 10px;
    padding: 5px;
    color: #DDD;
    font: 1em sans-serif;
}

#images img {
    margin: 5px;
}

JavaScript

function preview(input) {
    for (i = 0; i < input.files.length; i++) {
        var reader = new FileReader();
        reader.onload = function (e) {
            if (!document.getElementById('images').getElementsByTagName('img').length) {
                document.getElementById('images').innerHTML = '';
            }
            var img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100px';
            img.style.height = '100px';
            document.getElementById('images').appendChild(img);
        };
        reader.readAsDataURL(input.files[i]);
    }
}