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;
    width: 100px;
    height: 100px;
    display:block;
}

JavaScript

function preview(input) {
    for (i = 0; i < input.files.length; i++) {
        var reader = new FileReader();
        reader.onload = function (e) {
            if (!$('#images figure').size()) {
                $('#images').html('');
            }
            var fig = $("<figure><img /><input placeholder='Titulo' /></figure>");
            fig.find('img').attr('src', e.target.result);
            $('#images').append(fig);
        };
        reader.readAsDataURL(input.files[i]);
    }
}