Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

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

Freigeben： 2016-05-16 15:19:27

Original

1161 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Verwandte Etiketten：

js图片预览 js预览

Quelle：php.cn

Vorheriger Artikel：jQuery implementiert die Dropdown-Listenabfrage box_jquery für die mehrstufige Verknüpfung Nächster Artikel：Reines JavaScript basierend auf dem notie.js-Plug-in zur Implementierung von Nachrichtenaufforderungseffekten_javascript-Fähigkeiten

Erklärung dieser Website

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

Neueste Artikel des Autors