suchen

Heim >Web-Frontend >js-Tutorial >Implementieren Sie ganz einfach die Javascript-Fähigkeiten der js-Bildvorschaufunktion

Implementieren Sie ganz einfach die Javascript-Fähigkeiten der js-Bildvorschaufunktion

WBOY
WBOYOriginal
2016-05-16 15:19:271160Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung der Bildvorschau in js. Der Code ist relativ einfach und ich möchte ihn als Referenz mit Ihnen teilen. Die Details lauten wie folgt:

1. Effektvorschau

Rendering:

2. Implementierungscode: 

<html>
<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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：jQuery implementiert die Dropdown-Listenabfrage box_jquery für die mehrstufige VerknüpfungNächster Artikel：jQuery implementiert die Dropdown-Listenabfrage box_jquery für die mehrstufige Verknüpfung

In Verbindung stehende Artikel

Mehr sehen