简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > php教程 > PHP开发 > Hauptteil

Beispielcode für die Bildvorschaufunktion zum Hochladen der Eingabedatei

高洛峰
Freigeben： 2016-12-09 09:55:19
Original
1283 Leute haben es durchsucht

Das Hochladen einer Bildvorschau ist eigentlich sehr einfach, aber es fühlt sich erstaunlich an, da ich es noch nie gemacht habe. Heute werde ich den mysteriösen Schleier abnehmen. Tatsächlich ist das Prinzip durch das Folgende wirklich einfach Code.

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" multiple id="inputs"/> //multiple(多文件上传)
<div id=&#39;dd&#39;></div>
<script>
$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img src=&#39;"+reader.result+"&#39;>";
};
}
</script>
</body>
<html>
Nach dem Login kopieren

Erzielen Sie eine direkte Vorschau der hochgeladenen Bilder und vermeiden Sie den redundanten Prozess des Lesens von Bildern nach der Übermittlung

Verwandte Etiketten：
input file
Quelle：php.cn
Vorheriger Artikel：Von jQuery implementierte kleine Bildliste, Beispiel für eine Folie mit großem Bildanzeigeeffekt Nächster Artikel：jQuery übermittelt Formulardaten schnell stapelweise über Ajax
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
Aktuelle Ausgaben
Das Eingabeelement konnte nicht von der Website abgerufen werden Ich versuche also, ein Eingabeelement von Twitter abzurufen, aber wenn ich es ausführe, er...
Aus 2024-04-06 18:59:57
0
1
442
JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
Aus 2024-04-06 15:35:24
0
1
274
Auch nach dem Löschen bleibt der Wert meiner Dateieingabe erhalten Wie Sie im Screenshot sehen können. Ich wähle eine Datei aus, behalte das Popup bei, ohne ...
Aus 2024-04-06 15:44:52
0
1
384
Zeigen Sie durch Iteration ein verschachteltes Array von Objekten in einer HTML-Tabelle an Ich habe die folgende Eingabe, die ein Array verschachtelter Objekte enthält. summary ist ...
Aus 2024-04-05 14:11:42
0
1
1373
React das schließende Tag der Eingabe rendern lassen? Ich habe eine ungewöhnliche Anfrage. Meine Website wird mit React erstellt und ich möchte,...
Aus 2024-04-03 23:01:01
0
1
320
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！