<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
Selecciona una imagen:
<input type="file" id="myInputFile">
</p>
<p id="resultado"></p>
<script>
const fileInput = document.getElementById("myInputFile");
fileInput.addEventListener("change", function(e) {
const file = this.files[0];
const resultado = document.querySelector("#resultado")
if (file.type=="image/jpeg" || file.type=="image/pjpeg" || file.type=="image/gif" || file.type=="image/png") {
resultado.innerHTML="La imagen <b>" + file.name + "</b> ocupa <b>" + file.size + "</b> Bytes";
const img = new Image();
img.onload = function() {
resultado.innerHTML+=" y tiene un tamaño de: <b>" + this.width + "x" + this.height + "</b>";
}
var reader=new FileReader();
reader.onload=function(e) {
img.src = e.target.result;
}
reader.readAsDataURL(file);
} else {
resultado.innerText="No es un archivo de imagen";
}
});
</script>
</html>
Comentarios sobre la versión: Versión 1 (1)