Vanilla JS: Xem preview khi upload ảnh

https://viblo.asia/p/vanilla-js-xem-preview-khi-upload-anh-bJzKmVLwZ9N

by trung ken

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
  <h1 class="my-5 text-center">Preview image file upload</h1>
  <input type="file" class="form-control mb-4" />
  <div class="preview"></div>
</div>

CSS

.preview-img {
  max-width: 150px;
  margin: 0 1em 1em 0;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 3px;
}

JavaScript

const ipnFileElement = document.querySelector('input')
const resultElement = document.querySelector('.preview')
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']

ipnFileElement.addEventListener('change', function(e) {
  const files = e.target.files
  const file = files[0]
  const fileType = file['type']

  if (!validImageTypes.includes(fileType)) {
    resultElement.insertAdjacentHTML(
      'beforeend',
      '<span class="preview-img">Chọn ảnh đi :3</span>'
    )
    return
  }

  const fileReader = new FileReader()
  fileReader.readAsDataURL(file)

  fileReader.onload = function() {
    const url = fileReader.result
    resultElement.insertAdjacentHTML(
      'beforeend',
      `<img src="${url}" alt="${file.name}" class="preview-img" />`
    )
  }
})