Nutzen Sie die neuen Funktionen von HTML5, um das asynchrone Hochladen von Bilddateien zu erreichen. HTML5-Tutorial-Fähigkeiten

Es ist sehr einfach und bequem, die neuen Funktionen von HTML5 zum asynchronen Hochladen von Dateien zu verwenden. Dieser Artikel zeigt hauptsächlich den JS-Teil und die HTML-Struktur. Der folgende Code verwendet keine Bibliothek eines Drittanbieters. Wenn es einen Verweis gibt, achten Sie bitte auf einige Codeausschnitte, die nicht angezeigt werden. Die Effektvorschau auf meiner Seite:

1. Die Datei ist nicht ausgewählt 2. Die Datei ist ausgewählt


HTML-Codeteil:

Idee: Im folgenden Code verwende ich das Z-Index-Attribut von CSS, um das Tag „input="file" unter dem Element „id=btnSelect“ auszublenden. Nach dem Auslösen des Klicks auf das Tag „a“ wird das Dateiauswahlfeld angezeigt. Das Der folgende Masklayer wird verwendet, um auf die Bestätigungsschaltfläche zu klicken, um zu verhindern, dass Benutzer wiederholt auf die Bestätigungsschaltfläche klicken:

/>

Upload bestätigen -layer" style="max-width:90%">

Das Bild wird hochgeladen. ..

JS-Bilddatei-Überprüfungsteil:

Der Überprüfungsteil ist: Größe, ob ausgewählt, Datei. Der Typ besteht aus drei Teilen. Die erste createObject-Methode dient zum Erstellen des Vorschaupfads der lokalen Bilddatei , und überprüfen Sie, ob es leer ist, den Dateityp und die Dateigröße. Wenn die Bedingungen nicht erfüllt sind, wird

false zurückgegeben. Wenn die oben genannten Bedingungen erfüllt sind, generieren Sie die Bildvorschau Fügen Sie im Dom das img-Element hinzu und verwenden Sie dann die Methode createObjectURL(), um den Vorschaupfad zu erhalten:

Code kopieren

Der Code lautet wie folgt:


//Rufen Sie die URL-Adresse der Daten ab
Funktion createObjectURL(blob) {
if (window.URL) {
return window.URL.createObjectURL(blob); else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob); {
return null;

}

}
//Dateierkennung

function checkFile() {

//Get filevar file = $$( "uploadFile") .files[0]; //Beurteilen Sie, ob die Datei leer istif (file === null || file === undefiniert) { alert("Bitte wählen Sie die Datei aus, die Sie hochladen möchten dokumentieren! ");

$$("btnSelect").innerHTML = "Klicken Sie, um das Foto zum Hochladen auszuwählen";

return false;

}

//Dateityp erkennen
if(file .type.indexOf('image') === -1) {
alert("Bitte wählen Sie eine Bilddatei aus!");
return false
}
//Dateigröße berechnenvar size = Math.floor(file.size/1024);
if (size > 5000) {
alert("Die hochgeladene Datei darf 5M nicht überschreiten!");
return false;
};
//Vorschaubild hinzufügen
$$("btnSelect").innerHTML = "";
};



JS Ajax-Anfrageteil:

Beschreibung: Der erste Listener ist für Dateiauswahländerungsereignisse vorgesehen Der zweite Ereignis-Listener ist das Abhören der Antwort des Popup-Fensters, wenn auf btnSelect geklickt wird. Das Folgende ist die Ereignisüberwachung der Bestätigungs-Upload-Schaltfläche, um mit dem Senden der Ajax-Anfrage zu beginnen Ich habe den Code, einschließlich der addEventListener()-Methode, nicht gepostet. Diese beiden Teile können auf andere Artikel verweisen. Der Code lautet wie folgt:

Code kopieren
//Auf Änderungen der Bild-URL-Adresse achten
addEventListener($$("uploadFile"), "change", function() {
checkFile();
} );
//Anhören, um auf die Dateiauswahlschaltfläche zu klicken
addEventListener($$("btnSelect"), "click", function() {
//Öffnen Sie das Dateiauswahlfeld
$$(" uploadFile").click();
}//Hören Sie sich das Klickereignis der Bestätigungs-Upload-Schaltfläche an
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
//Führen Sie den Upload-Vorgang aus var xhr = createXHR();
$$("maskLayer").style.display = "block";
xhr.open("post","/uploadPhoto.action", true);
xhr .onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (flag == "success") {
alert("Image erfolgreich hochgeladen!");
} else {
alert("Bild erfolgreich hochgeladen!");
};
$$("maskLayer").style.display = "none";
};
//Formulardaten
var fd = new FormData();
fd.append("myPhoto", $$("uploadFile").files[0] );
//Execute Send
xhr.send(fd); );



Bei Fragen können Sie sich gerne an mich wenden.