Carga y Vista previa de imagen

Carga una imagen web y muestra una vista previa con Vanilla JS

by Porfirio Chavez

HTML

<h3>Vista Previa de Imágenes</h3>
<input type="file" id="upload" accept="image/*" />
<div id="result"></div>

CSS

body {
  background: #C9D6FF;
  background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);
  background: linear-gradient(to right, #E2E2E2, #C9D6FF);
}

h3 {
  font-family: verdana;
}

img {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid #CCC;
  border-radius: 0.4rem;
  max-width: 300px;
  background-color: white;
}

JavaScript

const inputFile = document.getElementById('upload');
const resultDiv = document.getElementById('result');
const reader = new FileReader();


inputFile.addEventListener('change', handleFileChange);

reader.addEventListener('load', showPreview);



function handleFileChange(event) {
  const [imageFile] = event.currentTarget.files;
  reader.readAsDataURL(imageFile);
}




function showPreview(event) {
  const previewImage = new Image();
  previewImage.src = event.currentTarget.result;
  resultDiv.innerHTML = '';
  resultDiv.appendChild(previewImage);
}