En este artículo, vamos a discutir dos métodos para obtener una vista previa de una imagen que se toma como entrada a través de un formulario. Vamos a utilizar el constructor de JavaScript FileReader() para leer la imagen proporcionada y luego la mostraremos.
Ejemplo: Veamos la estructura HTML con el estilo CSS.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Geeks</title>
<style>
.holder {
height: 300px;
width: 300px;
border: 2px solid black;
}
img {
max-width: 300px;
max-height: 300px;
min-width: 300px;
min-height: 300px;
}
input[type="file"] {
margin-top: 5px;
}
.heading {
font-family: Montserrat;
font-size: 45px;
color: green;
}
</style>
</head>
<body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<span class="heading">Geeks For Geeks</span>
<form>
<div class="holder">
<img id="imgPreview" src="#" alt="pic" />
</div>
<input type="file" name="photograph"
id="photo" required="true" />
</form>
</body>
</html>
Tenemos dos elementos principales con los que interactuaremos usando JavaScript. Primero, tenemos un elemento de división que contiene la etiqueta «img». Con Jquery, cambiaremos el atributo «src» de la etiqueta «img» al cargar para obtener una vista previa de la imagen. El segundo elemento es la etiqueta de «entrada». Es esencial especificar type = “file” en este contexto.
Producción:
Código JavaScript:
javascript
$(document).ready(()=>{
$('#photo').change(function(){
const file = this.files[0];
console.log(file);
if (file){
let reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result);
$('#imgPreview').attr('src', event.target.result);
}
reader.readAsDataURL(file);
}
});
});
Explicación:
- FileReader(): FileReader() es un constructor que se utiliza para crear un objeto FileReader (instancia de clase) que nos ayuda a realizar operaciones como la lectura asíncrona de búferes o archivos de datos sin procesar. Los objetos File o Blob se utilizan para designar el tipo de datos que se leerán. En este caso, el lector de variables es el objeto que usamos para realizar las operaciones requeridas.
- reader.readAsDataURL: el archivo o blob después de la carga se convierte en data:URL que contiene la string codificada en base64 que representa los datos en el blob o el archivo . Esta «data:URL» se almacena en el atributo de resultado , al que se puede acceder a través de event.target.result .
- reader.onload: la función reader.onload contiene un controlador de eventos que se activa cuando el lector se carga correctamente. Esta es una acción asincrónica, por lo tanto, el código posterior se ejecuta incluso antes de que se complete la carga. Una vez que la carga es exitosa, usamos event.target.result para acceder al “DataURL” formado y lo insertamos en el atributo src . De esta manera puede obtener una vista previa de la imagen.
Código definitivo:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Geeks</title>
</head>
<body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<span class="heading">Geeks For Geeks</span>
<form>
<div class="holder">
<img id="imgPreview" src="#" alt="pic" />
</div>
<input type="file" name="photograph"
id="photo" required="true" />
</form>
<style>
.holder {
height: 300px;
width: 300px;
border: 2px solid black;
}
img {
max-width: 300px;
max-height: 300px;
min-width: 300px;
min-height: 300px;
}
input[type="file"] {
margin-top: 5px;
}
.heading {
font-family: Montserrat;
font-size: 45px;
color: green;
}
</style>
<script>
$(document).ready(() => {
$("#photo").change(function () {
const file = this.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function (event) {
$("#imgPreview")
.attr("src", event.target.result);
};
reader.readAsDataURL(file);
}
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA