File Preview

by Dan Daniel

HTML

<input type="file" name="image0" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_0"/>
<img id="user_img_0" src="placeholder.png" class="placeholder" />
<br><br>
<input type="file" name="image1" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_1"/>
<img id="user_img_1" src="placeholder.png" class="placeholder" />
<br><br>
    <input type="file" name="image2" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_2"/>
<img id="user_img_2" src="placeholder.png" class="placeholder" />
<br><br>

CSS

.placeholder {
    height: 80px;
    width: 80px;
}

JavaScript

function previewImage(input) {
    console.log(input.dataset.thumbnail);
    var preview = document.getElementById(input.dataset.thumbnail);
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        preview.setAttribute('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    } else {
      preview.setAttribute('src', 'placeholder.png');
    }
  }