Heim >php教程 >PHP开发 >Beispielcode für die Bildvorschaufunktion zum Hochladen der Eingabedatei

Beispielcode für die Bildvorschaufunktion zum Hochladen der Eingabedatei

高洛峰
高洛峰Original
2016-12-09 09:55:191319Durchsuche

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>

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