В статье будет рассмотрен пример загрузки динамической загрузки изображений на чистом JavaScript'е. В примере будем использовать объект "FileReader()"

Все примечания можно найти в комментариях самого примера ниже.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="author" content="Vadim" />
    <title>Подгрузка изображения на JavaScript</title>
    <script type="text/javascript">
    // update image poligon
    function updateImage(fileInput) {
        // reset file input
        var file = document.getElementById("fileImage");
        file.value = "";
        file.style.display = "";
        // reset image
        document.getElementById("image_container").innerHTML = "";
        // hide btn update
        fileInput.style.display = "none";
    }
    // load image
    function loadImage(fileInput) {                   
        //there is only (1) file since they are not multiple type.
        var file = fileInput.files[0]; 
 
        if (file["type"].search("image") >= 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
               // Create a new image.
               var img = new Image();
               img.src = reader.result;
               // load image
               img.onload = function () {
                  // get container image
                  var containerIMG = document.getElementById("image_container");
                  // set styles
                  containerIMG.style.height = this.height;
                  containerIMG.style.width = this.width;
                  // append image
                  containerIMG.appendChild(img);         
               };
 
               // stores the image
               // тут можно прописать сохранения изображения в кеш к примеру
            }
 
            // attempts to read the file
            reader.readAsDataURL(file);
 
            // hide file type input
            document.getElementById("fileImage").style.display = "none";
            document.getElementById("btnupdfile").style.display = "";
 
        } else {
            alert("Необходимо выбрать изображение!");
            return false;
        }
    }
</script>
</head>
<body>
    <form action="#" method="post" enctype="multipart/form-data">
        <input type="file" onchange="loadImage(this);" id="fileImage" />
        <input type="button" id="btnupdfile" style="display:none;" onclick="updateImage(this); return false;" value="Удалить изображение" />
        <br /><br />
        <div id="image_container"></div>
    </form>
</body>
</html>

В примере изображение по событию onchange, при помощи FileReader, осуществляет чтение прикрепленного файла, что позволяет вывести его в закодированном виде.