suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Bildvorschaufunktion über js [mit Beispielcode]_Javascript-Kenntnisse

So implementieren Sie die Bildvorschaufunktion über js [mit Beispielcode]_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:07:131279Durchsuche

Implementierungscode: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>

Effektvorschau

Rendering:

Der obige Artikel zur Implementierung der Bildvorschaufunktion über js [mit Beispielcode] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie Script Home unterstützen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die falsche Verwendung von var in Javascript führt zu undefinierten_Javascript-TippsNächster Artikel：Die falsche Verwendung von var in Javascript führt zu undefinierten_Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen