Upload Image and display preview

I created a function to upload images, however I am having trouble viewing these images …
My problem: When I click the button to select an image, I select an image and would like it to fill the entire box.

Image 1 illustrates the problem (image fills the entire border)

image 1

Problem 2: When I select more than one image, they are all in line in the giant box … the goal was to have 1 image filling the big box and the remaining ones filling the small boxes.
Image 2 illustrates the problem.

image 2

In this image below I illustrate better what I intend.
enter image description here

Please someone help me !

MY CODEPEN

Javascript

var drop = $("input");
    drop.on('dragenter', function (e) {
      $(".drop").css({
        "border": "4px dashed #09f",
        "background": "rgba(0, 153, 255, .05)"
      });
      $(".cont").css({
        "color": "#09f"
      });
    }).on('dragleave dragend mouseout drop', function (e) {
      $(".drop").css({
        "border": "3px dashed #DADFE3",
        "background": "transparent"
      });
      $(".cont").css({
        "color": "#8E99A5"
      });
    });



    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object

      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
          continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
          return function (e) {
            // Render thumbnail.

            var span = document.createElement('span');
            span.innerHTML = ['<img class="thumbs" src="', e.target.result,
              '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('list').insertBefore(span, null);
          };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }

    $('#files').change(handleFileSelect);

118 thoughts on “Upload Image and display preview”

  1. 432171 512468Aw, this became an incredibly good post. In thought I would like to devote writing such as this moreover – taking time and actual effort to make a really excellent article but exactly what do I say I procrastinate alot and by no means find a approach to get something completed. 179997

    Reply