Die Bild -Upload -Vorschau -Funktion wird hauptsächlich zur Vorschau eines Effekts vor dem Hochladen verwendet. Derzeit umfassen die Mainstream -Methoden hauptsächlich JS, JQuery und Flash -Implementierung. Wir verwenden jedoch im Allgemeinen JS, um die Vorschau -Funktion des Bild -Uploads zu implementieren. Schauen wir uns ein Beispiel unten an.
Prinzip:
Es ist in zwei Schritte unterteilt: Wenn die Eingabe des Hochladens des Bildes ausgelöst und das lokale Bild ausgewählt wird, ist die URL (Objekt -URL) des zugeladenen Objekts; Weisen Sie das SRC-Attribut des vorgeschriebenen IMG-Tags der Objekt-URL zu, um das Bild anzuzeigen.
Hier müssen wir das Dateiobjekt, das BLOB -Objekt und das Fenster verstehen.
Dateiobjekt:
Das Dateiobjekt kann verwendet werden, um Informationen zu einer Datei zu erhalten und auch zum Lesen des Inhalts der Datei zu lesen. Im Allgemeinen stammt das Dateiobjekt aus dem vom Benutzer zurückgegebenen filelistischen Objekt nach Auswahl einer Datei in einem Eingabeelement, oder es kann ein DataTransfer -Objekt sein, das durch freie Drag -and -Drop -Operationen generiert wird.
Werfen wir einen Blick darauf, das filelistische Objekt zu erhalten:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript" src = "jQuery.js"> </script>
<input id = "hochladen" type = "file">
<img id = "preview" src = "">
<script type = "text/javaScript">
$ ('#Upload'). ändern (function () {
// Erhalten Sie das erste Element des Filelisten
alert (document.getElementById ('Upload'). Dateien [0]);
});
</script>
BLOB -Objekt:
Ein BLOB-Objekt ist ein Datei-ähnliches Objekt, das schreibgeschützte Rohdaten enthält. Die Daten in einem Blob -Objekt müssen nicht unbedingt eine native Form in JavaScript sein. Die Dateischnittstelle basiert auf Blob, erbt die Funktionen von Blob und erweitert sich, um lokale Dateien auf dem Computer des Benutzers zu unterstützen.
Die Objekt -URL, die wir erhalten möchten, wird tatsächlich aus dem Blob -Objekt erhalten, da die Dateischnittstelle den Blob erbt. Hier ist die Umwandlung des Blob -Objekts in eine URL:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
var f = document.getElementById ('Upload'). Dateien [0];
var src = window.url.createObjecturl (f);
document.getElementById ('Vorschau'). Src = Src;
</script>
Kompatibilität:
Die obige Methode ist für den Chrombrowser geeignet
Wenn es sich um einen IE -Browser handelt, können Sie den Eingangswert anstelle von SRC direkt verwenden
Beim Online -Anzeigen von Informationen können Sie die Methode GetasDataurl () des Dateiobjekts direkt verwenden, um die URL zu erhalten. Jetzt wurde diese Methode abgeschafft. In ähnlicher Weise gibt es Getastext () und GetAsBinary () -Methoden. Schauen wir uns ein solches Beispiel an.
Die Codekopie lautet wie folgt:
Funktion getFullPath (OBJ) {// Erhalten Sie den vollständigen Pfad zum Bild
if (obj) {
// dh
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select ();
return document.Selection.Createrange (). Text;
}
// Firefox
else if (window.navigator.useragent.indexof ("Firefox")> = 1) {
if (obj.files) {
return obj.files.item (0) .getasDataurl ();
}
Return OBJ.Value;
}
Return OBJ.Value;
}
}
Dieser Code ist der vollständige Pfad, um das Client -Bild zu erhalten
Wir werden seine Größe und das Format einschränken
Die Codekopie lautet wie folgt:
$ ("#loadFile"). Änderung (function () {
var strsrc = $ ("#loadFile"). Val ();
img = new Image ();
img.src = GetFulLPath (STRSRC);
// Überprüfen Sie, ob das Format "Upload -Datei" korrekt ist
var pos = strsrc.lastindexof (".");
var lastname = strsrc.substring (pos, strsrc.length)
if (lastname.tolowerCase ()! = ".jpg") {
alert ("Der Dateityp, den Sie hochladen, ist" + lastname + ", das Bild muss vom JPG -Typ sein");
false zurückgeben;
}
// Überprüfen Sie das Seitenverhältnis der hochgeladenen Datei
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
ALERT ("Der Anteil des Bildes, das Sie hochladen, liegt außerhalb des Bereichs, und das Seitenverhältnis sollte zwischen 1,25 und 1,5" liegen);
zurückkehren;
}
// Überprüfen Sie, ob die hochgeladene Datei übergroß ist
if (img.filesize / 1024> 150) {
ALERT ("Die Dateigröße, die Sie hochladen, überschreitet die 150k -Grenze!");
false zurückgeben;
}
Unter ihnen ist LoadFile die ID der HTML -Eingabedatei. Lassen Sie das Bild nach der Auswahl der Datei nach der Auswahl der Datei das Bild im Bildfeld angezeigt? Fügen Sie den folgenden Code zum Ende des obigen Codes hinzu
Die Codekopie lautet wie folgt:
$ ("#stupic"). attr ("src", getfulpath (this));
Da JQuery verwendet wird, teilen wir uns ein in JQuery geschriebenes Code -Beispiel weiter mit:
Die Codekopie lautet wie folgt:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<script type = "text/javaScript" src = "jQuery.js"> </script>
<script Language = "JavaScript">
$ (function () {
var ei = $ ("#groß");
ei.hide ();
$ ("#img1"). Mousemove (Funktion (e) {
ei.css ({top: e.Pagey, links: e.Pagex}).
}). Mouseout (function () {
ei.hide ("langsam");
})
$ ("#f1"). ändern (function () {
$ ("#img1") .attr ("src", "Datei: ///"+$ ("#f1") .val ());
})
});
</script>
<style type = "text/css">
#large {Position: absolut; Anzeige: Keine; Z-Index: 999;}
</style>
</head>
<body>
<Formular name = "Form1" id = "Form1">
<div id = "Demo">
<input id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<div id = "groß"> </div>
</form>
</body>
</html>