HTML5 File Reader
Download from: JSclasses

<div  class="row img-holder" onclick="new fileReader().Init('jpg|png|svg', 'dataURL', pickImage, true)"></div>
<script>
    function pickImage(e) {
        var div = document.createElement('div');
        var str = '<div class="col-sm-6 col-md-4">';
        str += '  <div class="thumbnail">';
        str += '    <img src="' + e.data + '" alt="...">';
        str += '    <div class="caption">';
        str += '      <h4>' + e.name + '</h4>';
        str += '      <p>size: ' + (e.size/1000).toString() + ' kilobyte</p>';
        str += '    </div>';
        str += '  </div>';
        str += '</div>';
        div.innerHTML = str;
        document.querySelector('.img-holder').appendChild(div.children[0]);
    }   
</script>

<button type="button" class="btn btn-success" onclick="new fileReader().Init('php|html|css|txt', 'text', function (e){document.querySelector('textarea').value += e.data}, true) ;">load text</button>

// Usage:
new fileReader().Init(
    'php|html|css|txt', //pipe selected file types
    'text', // read file as: dataURL or binary or array or text
    function (e){}, // callBack function return {data: e.target.result, name: theFile.name, size: theFile.size}
    true //    multiple file select true or false
);

<script type="text/javascript">
    //HTML5 fileReader v.1.0.0
    //Author: Tóth András
    //Licence: MIT
    //url: http://atandrastoth.co.uk
    var fileReader = function() {
        var init = function(types, readAs, callBack, multy) {
            multy = typeof multy == 'undefined' ? false : multy;
            var input = document.createElement('input');
            input.style.cssText = 'display: none;';
            input.type = "file";
            if (multy) input.multiple = true;
            document.querySelector('body').appendChild(input);
            input.addEventListener('change', selectFiles, false);
            input.click();

            function selectFiles(evt) {
                var files = (evt.target || evt.sourceElement).files;
                removeElement(input);
                for (var i = 0, f; f = files[i]; i++) {
                    if (!f.name.toLowerCase().match('(.)(.*(' + types.toLowerCase() + '))')) {
                        continue;
                    }
                    var reader = new FileReader();
                    reader.onload = (function(theFile) {
                        return function(e) {
                            //config required data from e, theFile
                            callBack({data: e.target.result, name: theFile.name, size: theFile.size});
                        };
                    })(f);
                    switch (readAs) {
                        case 'dataURL':
                            reader.readAsDataURL(f);
                            break;
                        case 'binary':
                            reader.readAsBinaryString(f);
                            break;
                        case 'array':
                            reader.readAsArrayBuffer(f);
                            break;
                        default:
                            reader.readAsText(f);
                    }
                }
            }
        };

        function removeElement(element) {
            element && element.parentNode && element.parentNode.removeChild(element);
        }
        return {
            Init: function(types, readAs, callBack, multy) {
                init(types, readAs, callBack, multy);
            }
        }
    };
</script>