Este artículo describe el método para implementar el efecto de vista previa de imágenes antes de cargar imágenes por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! DocType html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Efecto de vista previa de la imagen antes de cargar imágenes por JS </title>
</ablo>
<Body>
<input id = "myFile" type = "file" />
<Br />
<img src = "/images/logo.gif"/>
<div id = "info"> </div>
<script type = "text/javaScript">
var dfile = document.getElementById ('myFile');
var dimg = document.getElementsBytagName ('img') [0];
var dinfo = document.getElementById ('info');
dfile.onchange = function () {
if (! dfile.value.match (/. jpg | .gif | .png | .bmp/i)) {alert ('El tipo de archivo debe ser: .jpg, .gif, .bmp o .png!'); return;}
if (dfile.files) {
dimg.src = dfile.files [0] .getAsdataurl ();
} else if (dfile.value.indexof ('//')> -1 || dfile.value.indexof ('//')> -1) {
dimg.src = dfile.value;
}
}
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.