Preview an Image by the side before uploading

Question

I want to be able to preview my images before upload like this and I have been doing research online and looking at past questions which is kind of related to mine, But each time I try to copy the JS code and do some modifications it doesn't really work for me. Probably, because I'm still trying to learn JavaScript and J query Any one with suggestions on methods of achieving this?

Here are my HTML and CSS

var count = 0;

function handleFileSelect(evt) {
  var $fileUpload = $("input#Photofile[type='file']");
  count = count + parseInt($fileUpload.get(0).files.length);

  if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
    alert("You can only upload a maximum of 3 photos");
    count = count - parseInt($fileUpload.get(0).files.length);
    evt.preventDefault();
    evt.stopPropagation();
    return false;
  }
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();

    reader.onload = (function(theFile) {
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    reader.readAsDataURL(f);
  }
}

$('#Photofile').change(function(evt) {
  handleFileSelect(evt);
});

$('#list').on('click', '.remove_img_preview', function() {
  $(this).parent('span').remove();

  //this is not working...
  var i = array.indexOf($(this));
  if (i != -1) {
    array.splice(i, 1);
  }
  // tried this too:
  //$(this).parent('span').splice( 1, 1 );

  count--;
});

form .post-image-collection {
  margin: -20px 0px 0px -20px;
  overflow: hidden;
}

form .post-image {
  position: relative;
  float: left;
  height: 152px;
  width: 170px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.mrm {
  margin-right: 20px;
}

.mts {
  margin-top: 10px;
}

form .post-image img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  vertical-align: top;
  border-radius: 3px;
  overflow: hidden;
}

form .post-image .icon-camera {
  display: none;
}

form .post-image input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

form .post-image.empty {
  position: relative;
  float: left;
  height: 130px;
  width: 130px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
}

form .post-image.empty .icon-camera {
  display: block;
  height: 30px;
  line-height: 30px;
  left: 40%;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
  cursor: inherit;
  margin: -15px 0px 0px -15px;
}

form .post-image.empty .icon-camera img {
  height: 60px;
  width: 60px;
}

form .post-image.empty input {
  cursor: pointer;
}

form .post-image p,
.file_container-orange p {
  margin: 10px 0;
  margin: 1rem 0;
  text-align: center;
  font-family: "OpenSansSemiBold", sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

#list {
  float: left;
}

.thumb {
  height: 130px;
  width: 130px;
  margin-right: 20px;
  margin-top: 10px;
}

.remove_img_preview {
  position: relative;
  top: -46px;
  right: 40px;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  background: white;
  border-radius: 0px 0px 0px 3px;
  text-align: center;
  cursor: pointer;
}

.remove_img_preview:before {
  content: "×";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="row row-images">
    <label for="image">Images*</label>
    <div class="column image_container">
      <div class="post-image-collection">
        <label id="list"></label>
        <label class="post-image post-image-placeholder mrm mts empty">
          <input type="file" id="Photofile" name="images[]" required="required" multiple />
          <span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
          <p class="uppercase">Photo</p>
        </label>
      </div>
    </div>
</form>

Welcome to Stack Overflow! Please take some time to read the help page, especially the sections named ["What topics can I ask about here?"](http://stackoverflow.com/help/on-topic), ["What types of questions should I avoid asking?"](http://stackoverflow.com/help/dont-ask), and more importantly, please read [the Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922). — Rory McCrossan, Feb 20 '18 at 10:13
Possible duplicate of [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Shree, Feb 20 '18 at 10:16

Nikhil Ghuse · Answer 1 · 2018-02-20T11:27:21.337

on reference of This link which it is assumed to be a duplicate of

$(function(){
$("#Photofile").change(function() {
  if (this.files && this.files[0]){     
    var reader = new FileReader();
    reader.onload = function(e) {   
      $('#imageDisplay,#imageDisplay1,#imageDisplay2').attr('src', e.target.result);
    }
    reader.readAsDataURL(this.files[0]);
  }
});
});

form .post-image-collection {
  margin: -20px 0px 0px -20px;
  overflow: hidden;
}

form .post-image {
  position: relative;
  float: left;
  height: 152px;
  width: 170px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.mrm {
  margin-right: 20px;
}

.mts {
  margin-top: 10px;
}

form .post-image img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  vertical-align: top;
  border-radius: 3px;
  overflow: hidden;
}

form .post-image .icon-camera {
  display: none;
}

form .post-image input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

form .post-image.empty {
  position: relative;
  float: left;
  height: 130px;
  width: 130px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
  margin-top:50px;
}

form .post-image.empty .icon-camera {
  display: block;
  height: 30px;
  line-height: 30px;
  left: 40%;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
  cursor: inherit;
  margin: -15px 0px 0px -15px;
}

form .post-image.empty .icon-camera img {
  height: 60px;
  width: 60px;
}

form .post-image.empty input {
  cursor: pointer;
}

form .post-image p,
.file_container-orange p {
  margin: 10px 0;
  margin: 1rem 0;
  text-align: center;
  font-family: "OpenSansSemiBold", sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

#list {
  float: left;
}

.thumb {
  height: 130px;
  width: 130px;
  margin-right: 20px;
  margin-top: 10px;
}

.remove_img_preview {
  position: relative;
  top: -46px;
  right: 40px;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  background: white;
  border-radius: 0px 0px 0px 3px;
  text-align: center;
  cursor: pointer;
}

.remove_img_preview:before {
  content: "×";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<img id="imageDisplay" alt="uploaded Image"/>
<img id="imageDisplay1" alt="uploaded Image"/>
<img id="imageDisplay2" alt="uploaded Image"/>
  <div class="row row-images">
    <label for="image">Images*</label>
    <div class="column image_container">
      <div class="post-image-collection">
        <label id="list"></label>
        <label class="post-image post-image-placeholder mrm mts empty">
          <input type="file" id="Photofile" name="images[]" required="required" multiple />
          <span class="icon-camera">
          <img src="https://cdn.onlinewebfonts.com/svg/img_134042.png">
          </span>
          <p class="uppercase">Photo</p>
        </label>
      </div>
    </div>
</form>

Thanks for your help. I just edited my question with a snippet which works. You can check it. Only problem is at the level of uploading to database. When I select all 3 images at once, it uploads all 3 images to database. But when I select the 3 images one after the other, it just uploads one. Something is quite wrong with the script. :((( — Douggy Budget, Feb 20 '18 at 11:12
Yeah exactly. It's not perfectly working. Have been searching on google what can be the problem, but nothing shows up — Douggy Budget, Feb 20 '18 at 11:24
I just checked it, But it displays the same image three times. and when I try select another image, it deletes the previous one and displays the new one three times as well — Douggy Budget, Feb 20 '18 at 11:49
@DouggyBudget Dude I have updated my answer and uploaded a image that is captured from you code on uploading 3 images and it works — Nikhil Ghuse, Feb 20 '18 at 11:51

Preview an Image by the side before uploading

1 Answers1