multiple input file w/ preview

by Stalk

HTML

<button class="addFiles">ADD FILES</button>
<form id="myForm" action="" method="post" enctype="multipart/form-data">
  <input type="text" name="foo" value="bar">
  <input type="text" name="hello" value="world">
</form>

CSS

.preview_wrapper {
    height: 80px; width: 80px;
    background-color: #fefefe;
    border: dashed 1px #ccc;
}
.preview_wrapper div {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%; width: 100%;
}
.imgGroup {
  outline: dashed 1px tomato;
  position: relative;
}
.imgGroup input {
  opacity: 0;
  pointer-events: none;
}
.imgGroup .del {
  position: absolute;
  top: 0; right: 0;
  color: red;
}

JavaScript

$('#myForm').on('change', '.imgGroup input[type="file"]', function() {
  if (!window.FileReader) return false // check for browser support
  let input = this
  if (input.files) {
    [...input.files].map(function(file) {
      let reader = new FileReader()
      reader.onload = function(e) {
        let html = `<div class="preview_wrapper">
					<div style="background-image: url(${e.target.result})"></div>
				</div>`
        input.insertAdjacentHTML('beforebegin', html);
      }
      reader.readAsDataURL(file);
    })
  }
})

$('.addFiles').on('click', function() {
	$(myForm).append('<div class="imgGroup">'
  	+'<input type="file" multiple name="iamges[]">'
    +'<b class="del">X</b>'
  +'</div>')
  $('.imgGroup:last input', myForm).click()
})

$('#myForm').on('click', '.imgGroup .del', function(){
	$(this).closest('.imgGroup').remove()
})