HTML5 implementiert einzelne und mehrere Bild-Upload-Funktionen

Vorwort

Heute sprechen wir über das Hochladen von Bildern, einzeln oder mehrfach. Heutzutage gibt es unzählige wichtige Plug-Ins zum Hochladen von Bildern, wie zum Beispiel: verupload.js von Jquery, jQuery File Upload, Uploadify, jQuery.filter und so weiter. Aber. Wir werden heute nicht über die oben genannten Plug-Ins sprechen. Schauen wir uns an, wie man FileReader in HTML5 verwendet, um Einzel- und Mehrfachbildvorschau, Lösch-, Hochlade- und andere Funktionen zu realisieren. Werfen wir einen Blick auf die Wirkung nach der Implementierung:

Dies ist die Schaltfläche, auf die der Benutzer klickt. Unser wichtigster Satz ist Eingabetyp = Datei und es wird ein Mehrfachattribut angegeben, das den Anforderungen des Hochladens mehrerer Bilder gerecht werden kann.

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>Clubalbum</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <input type=file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

Der Bereich darunter dient der Bildvorschau

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm ></div> </div> </div></div>

Was? Man muss sich sogar den Stil ansehen, um zu sehen, ob er noch menschlich ist (schiefes Lächeln)

Lassen Sie uns zunächst den HTML-Code oben analysieren. Wir hoffen, dass durch Klicken auf das +-Bild im Rendering ein Dialogfeld zum Auswählen von Fotos angezeigt wird Klicken Sie zuerst auf das Etikett und klicken Sie auf das Ereignis:

 $(#btnClubImg).click(function() { //TODO Something});

Schauen wir es uns als nächstes an, denn wir möchten die hochgeladene Datei erhalten und unsere Datei befindet sich hauptsächlich in der Eingabe, also erhalten wir zuerst das Eingabe-Tag:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//Das aktuelle Element drucken});

Lassen Sie uns die aktuelle Beschriftung des Eingabeelements ausdrucken, um zu sehen, was sie ist.

Wenn wir das erste Element erweitern, werden wir feststellen, dass die Länge in Dateien 0 beträgt.

Okay, fahren wir mit der Analyse fort, denn wir möchten die aktuell ausgewählte Datei abrufen, wenn sich das Eingabefeld ändert. Vereinfacht gesagt können wir die aktuell ausgewählte Datei abrufen Daher wissen wir nach der Analyse, dass wir dem Eingabe-Tag ein Änderungsereignis hinzufügen müssen:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// Das geänderte aktuelle Element drucken});});

Werfen wir einen Blick darauf, was sich im geänderten Eingabeelement befindet:

Hier ist deutlich zu erkennen, dass wir das ausgewählte Bild erhalten haben, einschließlich des letzten Änderungsereignisses, des Bildnamens, der Größe und des Bildtyps (anhand des Dateityps können wir beurteilen, ob der aktuelle Benutzer ein Bild auswählt, oder? (schielendes Lächeln) )) Auch dies gilt für eine einzelne Datei. Wenn es sich um mehrere Dateien handelt, gibt es mehrere Dateien.

Wenn wir nach unten schauen, können wir dem Ausdruck entnehmen, dass wir die gewünschten Dateiinformationen im Dateielement des Eingabe-Tags haben. Wir müssen sie nur abrufen:

 var files = this.files; var length = files.length;

Auf diese Weise können wir alle Dateien und die Anzahl der Dateien abrufen. Wenn wir mehrere Dateien auswählen, was ist, wenn wir sie einzeln ausgeben und auf der Seite anzeigen? Als Sie die vier oben markierten Wörter sahen, kamen Ihnen da zwei Wörter in den Sinn? Zyklus

 $.each(files, function (key, value) { //TOTO Something });

Durch Durchlaufen der oben erhaltenen Dateien können wir nacheinander die Informationen jeder Datei erhalten. Auf diese Weise können Sie sie nicht nur nacheinander ausgeben, sondern bei Bedarf auch in den Himmel schicken ~

 var fileReader = new FileReader();//Instanziieren eines FileReader-Objekts var file_ = files[key];//Holen Sie sich die aktuelle Datei if (/^image///w+$/.test(file_.type)) {// Führen Sie einen regelmäßigen Abgleich für die aktuelle Datei durch, um zu sehen, ob es sich um das ausgewählte Bild handelt fileReader.onload = function() {//Wird aufgerufen, wenn der Lesevorgang abgeschlossen ist} }

Es ist notwendig, die Wissenspunkte von FileReader zu erweitern:

FileReader wird hauptsächlich zum Einlesen von Dateiinhalten in den Speicher verwendet. Über eine Reihe asynchroner Schnittstellen kann im Hauptthread auf lokale Dateien zugegriffen werden.

Mit FileReader-Objekten können Webanwendungen asynchron den Inhalt von Dateien (oder Rohdatenpuffern) lesen, die auf dem Computer des Benutzers gespeichert sind. Sie können File-Objekte oder Blob-Objekte verwenden, um die zu verarbeitenden Dateien oder Daten anzugeben.

Zurück zum Thema: Wir konnten die Datei abrufen und die Rückgabe erhalten, sodass wir zu diesem Zeitpunkt nur das zurückgegebene Ergebnis anzeigen müssen.

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

Drucken wir dieses Ergebnis aus, um zu sehen, was es ist:

Selbstverständlich wird das Bild in das Base64-Datenformat konvertiert. Schließlich rufen wir readAsDataURL auf, um den Dateiinhalt zu lesen und ihn als data:url-String darzustellen.

fileReader.readAsDataURL(value);

Auf diese Weise können Sie eine einfache Demo zum Hochladen von Bildern erhalten, diese ist jedoch nicht endgültig, da Sie noch viel Geschäft hinzufügen müssen. Zum Beispiel: Nach dem Abrufen eines Vorschaubilds wird das aktuelle Etikett belegt. Wenn Sie das nächste Mal das Originaletikett verwenden, wird dies definitiv nicht der gewünschte Effekt sein in der Lage sein, es nacheinander anzuzeigen, anstatt die Anzeige zu ersetzen. Wir müssen also noch etwas verarbeiten:

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//Verwenden Sie apend, um einen untergeordneten Knoten unter dem aktuellen Element anzuhängen $(#clubInputImagePreview) .append(<img src='/Images /registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//Verwenden Sie after, um einen Geschwisterknoten an den aktuellen Geschwisterknoten anzuhängen $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - Vorschau-sm delImg' ></div>);

Wenn wir dann das gelöschte Bild hinzufügen, müssen wir ihm auch ein Klickereignis geben, damit unser aktueller Vorschaubereich verschwindet:

 $(#ImgRemove).click(function () { $(this).parent().remove();});

Am Ende werden Sie feststellen, dass das Ergebnis nicht unseren Wünschen entspricht. Das liegt daran, dass die aktuelle ID noch vorhanden ist und der nächste Schritt nicht ausgeführt werden kann. Wir müssen nur die ID des aktuellen Elements entfernen und dann eine hinzufügen Element mit derselben ID, daher geht der Browser davon aus, dass es sich um ein neues Element handelt:

 $input.removeAttr(id); var newInput ='<input type=file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>';

Der endgültige vollständige JS-Code lautet wie folgt:

 var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length if (intP > 8) {layer.msg('Keine weiteren Bilder~', {}); return; } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('No more images~', {} } if (key == 0 && return; intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(background-image, url( + this.result + )); $(#clubInputImagePreview) .append( <img src=' /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div>); else { $(#clubInputImagePreview + parseInt(intP) + ).css(background-image, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div>); } if (key == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); } else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function () { $(this).parent().remove(); }); intP += parseInt(1); fileReader.readAsDataURL(value); } else {layer.msg(Format error<br/>Bitte wählen Sie eine Bilddatei } }); file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput) });

Das Obige ist die vom Herausgeber eingeführte HTML5-Implementierung der Funktionen zum Hochladen einzelner und mehrerer Bilder. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.