Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Manga Reader</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
  <body>
    <div id="cont">

          <div class="upload-drop-zone container" id="drop-zone">
            Just drag and drop files here
          </div>
      </div>
    </div>

    <style>

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        /* layout.css Style */
        .upload-drop-zone {
        height: 200px;
        border-width: 2px;
        margin-bottom: 20px;
        margin-top: 10em;

        }

        /* skin.css Style*/
        .upload-drop-zone {
        color: rgb(137, 158, 228);
        border-style: dashed;
        border-color: rgb(126, 127, 211);
        line-height: 200px;
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;

        }

        .upload-drop-zone.drop {
        color: rgb(102, 104, 230);
        border-color: rgb(102, 104, 230);
        }

    </style>
    <script>
        var dropZone = document.getElementById('drop-zone');

        function startLoading(files){
            if (files.length) {
            dropZone.parentNode.removeChild(dropZone);
            for (var i in files) {
              var src = createObjectURL(files[i]);
              var image = new Image();
              image.src = src;
              image.id = i;
              image.className = "page";
              document.getElementById("cont").appendChild(image);
            }
          }
        }
        dropZone.ondrop = function(e) {
        e.preventDefault();
        this.className = 'upload-drop-zone';

        startLoading(e.dataTransfer.files);
    }

    dropZone.ondragover = function() {
        this.className = 'upload-drop-zone drop';
        return false;
    }

    dropZone.ondragleave = function() {
        this.className = 'upload-drop-zone';
        return false;
    }
      function createObjectURL(object) {
        return window.URL
          ? window.URL.createObjectURL(object)
          : window.webkitURL.createObjectURL(object);
      }

      function revokeObjectURL(url) {
        return window.URL
          ? window.URL.revokeObjectURL(url)
          : window.webkitURL.revokeObjectURL(url);
      }


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