Beispiel für eine lokale Vorschau vor dem Hochladen von Javascript-Bildern_Javascript-Kenntnisse

Die Bild-Upload-Vorschaufunktion wird hauptsächlich verwendet, um eine Vorschau eines Effekts anzuzeigen, bevor das Bild hochgeladen wird. Die aktuellen Mainstream-Methoden umfassen hauptsächlich js, jquery und flash, aber wir verwenden im Allgemeinen js, um die Bild-Upload-Vorschaufunktion zu implementieren an einem Beispiel.

Grundsatz:

Es ist in zwei Schritte unterteilt: Wenn die Eingabe zum Hochladen des Bildes ausgelöst und das lokale Bild ausgewählt wird, wird die URL des hochzuladenden Bildobjekts (Objekt-URL) abgerufen Attribut des vorab geschriebenen img-Tags. Zeigt das Bild.

Hier müssen wir das File-Objekt, das Blob-Objekt und die Methode window.URL.createObjectURL() in Javascript verstehen.

Dateiobjekt:

Das File-Objekt kann verwendet werden, um Informationen über eine Datei abzurufen und kann auch zum Lesen des Inhalts dieser Datei verwendet werden. Normalerweise ist das File-Objekt das FileList-Objekt, das zurückgegeben wird, nachdem der Benutzer eine Datei in einem Eingabeelement ausgewählt hat Es kann aus dem DataTransfer-Objekt stammen, das per Drag-and-Drop-Vorgang generiert wurde.
Schauen wir uns an, wie wir das FileList-Objekt erhalten:

Code kopieren Der Code lautet wie folgt:

Blob-Objekt:

Ein Blob-Objekt ist ein dateiähnliches Objekt, das schreibgeschützte Rohdaten enthält. Die Daten im Blob-Objekt müssen nicht unbedingt in der nativen Form in JavaScript vorliegen. Die Dateischnittstelle basiert auf Blob und erbt die Funktionen von Blob und erweitert die Unterstützung Eine lokale Datei auf dem Computer des Benutzers.
Die Objekt-URL, die wir erhalten möchten, wird tatsächlich vom Blob-Objekt abgerufen, da die Dateischnittstelle Blob erbt. Konvertieren wir das Blob-Objekt in eine URL:

Code kopieren Der Code lautet wie folgt:

Kompatibilität:

Die obige Methode ist auf den Chrome-Browser anwendbar.
Wenn es sich um einen IE-Browser handelt, können Sie den Eingabewert direkt anstelle von src verwenden.
Um Informationen online anzuzeigen, können Sie direkt die Methode getAsDataURL() der Datei verwenden Objekt zum Abrufen der URL Alle ähnlichen Methoden umfassen getAsText() und getAsBinary().

Code kopieren Der Code lautet wie folgt:

function getFullPath(obj) { //Get der vollständige Bildpfad
if (obj) {
//ie
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;
} 🎜> }
}

Dieser Code dient dazu, den vollständigen Pfad des Client-Images abzurufenWir werden seine Größe und sein Format begrenzen

Code kopieren Der Code lautet wie folgt:

$("#loadFile").change(function () {
var strSrc = $("#loadFile").val();
img = new Image();
img.src = getFullPath(strSrc);
//Überprüfen Sie, ob das hochgeladene Dateiformat korrekt ist
var pos = strSrc.lastIndexOf("."); strSrc. length)
if (lastname.toLowerCase() != ".jpg") {
warning("Der von Ihnen hochgeladene Dateityp ist "lastname", und das Bild muss vom Typ JPG sein"); 🎜> return false;
}
//Überprüfen Sie das Seitenverhältnis der hochgeladenen Datei

if (img.height / img.width > 1,5 || img.height / img.width < ; 1,25) {
warning("Das Seitenverhältnis des von Ihnen hochgeladenen Bildes liegt außerhalb des zulässigen Bereichs, das Seitenverhältnis sollte zwischen 1,25 und 1,5 liegen");
//Überprüfen Sie, ob Die hochgeladene Datei überschreitet die Größe
if (img .fileSize / 1024 > 150) {
warning("Die von Ihnen hochgeladene Dateigröße überschreitet das Limit von 150 KB!");
return false;



LoadFile ist unter anderem die ID der HTML-Eingabedatei. Möchten Sie, dass das Bild im Änderungsereignis, also nach Auswahl der hochzuladenden Datei, am Ende des obigen Codes angezeigt wird
?

Code kopieren

Der Code lautet wie folgt:$("#stuPic").attr ("src ", getFullPath(this));

Da jQuery verwendet wird, teilen wir uns ein Beispiel für mit jQuery geschriebenen Code:

Code kopieren

Der Code lautet wie folgt: