Multiple image in one button with preview

Question

i have a little problem with image upload preview. Here's the preview of the element :

And this is the code :

<div class="img-container">
  <img id="preview-1" src="" alt="" />
  <div class="more">
    <img id="preview-2" src="" alt="" />
    <img id="preview-3" src="" alt="" />
    <span>Max 3 images.</span>
  </div>
  <label for="upload-btn" class="button">
    <img src="ssts/img/svg/upload.svg" alt="" />
    <span>UPLOAD</span>
    <input id="upload-btn" name="upload" type="file" accept="image/*"/>
  </label>
</div>

My problem is, how do i upload more than one image in single button and it will automatically show the preview in the element ? And after all of the element filled, the upload button will change to "Remove" that if clicked it will remove all the preview ? Thanks in advance!

UPDATE

the most important question is, "showing all of choosen images, and automatically show to the preview"

Answer 1

You need the multiple attribute and you need to specify that the name is an array.

multiple (HTML5)

This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.

<input id="upload-btn" name="upload[]" type="file" accept="image/*" multiple />

You can find a example using PHP here:

How can I select and upload multiple files with HTML and PHP, using HTTP POST?

The following demo was adapted from this:

Multiple image upload and preview

window.onload = function() {
  // Check for File API support.
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById('upload-btn');
    filesInput.addEventListener('change', function(e) {
      var output = document.getElementById('result');
      var files = e.target.files; //FileList object
      
      output.innerHTML = ''; // Clear (previous) results.
      
      for (var i = 0; i < files.length; i++) {
        var currFile = files[i];
        if (!currFile.type.match('image')) continue; // Skip non-images.
        
        var imgReader = new FileReader();
        imgReader.fileName = currFile.name;
        imgReader.addEventListener('load', function(e1) {
          var img = e1.target;
          var div = document.createElement('div');
          div.className = 'thumbnail';
          div.innerHTML = [
            '<img src="' + img.result + '"' + 'title="' + img.fileName + '"/>',
            '<label class="caption">' + img.fileName + '</label>'
          ].join('');
          output.appendChild(div);
        });

        // Read image.
        imgReader.readAsDataURL(currFile);
      }
    });
  } else {
    console.log('Your browser does not support File API!');
  }
}

body {
  padding: 0;
  margin: 0;
}
header {
  background-color: #EEE;
  padding: 0.125em;
}
article {
  margin: 0.5em;
}
output {
  display: block;
}
.thumbnail {
  display: inline-block;
}
.thumbnail img {
  height: 100px;
  margin: 4px;
  border: 1px solid #444;
}
label.caption {
  display: block;
  text-align: center;
  font-style: italic;
  color: #444;
}

<header>
  <h1>File API - FileReader</h1>
</header>
<article>
  <label for="files">Select multiple files: </label>
  <input type="file" id="upload-btn" name="upload[]" accept="image/*" multiple />
  <output id="result" />
</article>

const IMAGE_LIMIT = 3;
window.onload = function() {
  // Check for File API support.
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById('upload-btn');
    filesInput.addEventListener('change', function(e) {
      var output = document.getElementById('result');
      var files = e.target.files; //FileList object
      
      for (var i = 0; i < files.length; i++) {
        var currFile = files[i];
        if (!currFile.type.match('image')) continue; // Skip non-images.
        
        var imgReader = new FileReader();
        imgReader.fileName = currFile.name;
        imgReader.index = i;
        imgReader.addEventListener('load', function(e1) {
          var img = e1.target;
          var index = img.index;
          if (index < IMAGE_LIMIT) {
            var imgContainer = document.getElementById('preview-' + (index + 1));
            imgContainer.src = img.result;
            imgContainer.title = img.fileName
          }
        });

        // Read image.
        imgReader.readAsDataURL(currFile);
      }
    });
  } else {
    console.log('Your browser does not support File API!');
  }
}

body { padding: 0; margin: 0; background: #DADFE2; }
.img-container {
  width: 284px;
  padding: 0.5em;
  border: 1px solid #AAA;
  background: #EEEEEE;
}
img[id^="preview-"] {
  display: inline-block;
  border: border: 1px solid #777;
  margin: 0.25em;
  background: #DADFE2;
}
#preview-1 {
  width: 256px;
  height: 256px;
}
#preview-2, #preview-3 {
  width: 64px;
  height: 64px;
}
.button {
  display: inline-block;
  margin: 0.25em;
  padding: 0.5em;
  background: #FF6B6F;
  color: #FFF;
  width: 98%;
  text-align: center;
}
.button:hover { cursor: pointer; background: #ff8486; }
.button:active { background: #e55052; }
input[type="file"]#upload-btn {
  display: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="img-container">
  <img id="preview-1" src="" alt="" />
  <div class="more">
    <img id="preview-2" src="" alt="" />
    <img id="preview-3" src="" alt="" />
    <span>Max 3 images.</span>
  </div>
  <label for="upload-btn" class="button">
    <i class="fa fa-upload"></i>
    <span>Upload</span>
    <input type="file" id="upload-btn" name="upload[]"  accept="image/*" multiple />
  </label>
</div>