URL.createObjectURL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using object URLs to display images(developer.mozilla.org)</title>
</head>
<body>
    <input type="file" id="photo" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <a href="#" id="fileSelect">Select some files</a>
    <div id="fileList">
        <p>No files selected!</p>
    </div>

    <script>
        window.URL = window.URL || window.webkitURL;

        var photo = document.getElementById("photo");
        var fileSelect = document.getElementById("fileSelect");
        var fileList = document.getElementById("fileList");
        fileSelect.addEventListener("click", function (e) {
            e.preventDefault();
            if (photo) {
                photo.click();
            }
        }, false);

        function handleFiles(files) {
            if (!files.length) {
                fileList.innerHTML = "<p>No files selected!</p>";
            } else {
                fileList.innerHTML = "";
                for (var i = 0; i < files.length; i++) {
                    var img = document.createElement("img");
                    img.src = window.URL.createObjectURL(files[i]);
                    img.height = 60;
                    img.onload = function() {
                        window.URL.revokeObjectURL(this.src); //clear createObjectURL reference
                    }
                    fileList.appendChild(img);
                }
            }
        }

    </script>
</body>
</html>