Beispielcode für die Bildvorschaufunktion zum Hochladen der Eingabedatei
- 高洛峰Original
- 2016-12-09 09:55:191231Durchsuche
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='dd'></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='"+reader.result+"'>";
};
}
</script>
</body>
<html>Erzielen Sie eine direkte Vorschau der hochgeladenen Bilder und vermeiden Sie den redundanten Prozess des Lesens von Bildern nach der Übermittlung
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：Von jQuery implementierte kleine Bildliste, Beispiel für eine Folie mit großem BildanzeigeeffektNächster Artikel：Von jQuery implementierte kleine Bildliste, Beispiel für eine Folie mit großem Bildanzeigeeffekt