js zum Hochladen von Bildern auf den Server

js zum Hochladen von Bildern auf den Server

In diesem Artikelbeispiel wird der spezifische Code von js zum Hochladen von Bildern auf den Server zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

HTML

//Mehrere Bilder mehrfach hochladen
<input type="file" id="file" multiple>
//Native Senden-Schaltfläche <input type="submit">

JavaScript

<Skript>
    // Definieren Sie ein Array zum Empfangen von in Base64 konvertierten Bildern let ArrayImg=[]
    var index = 0; //Fügen Sie dem Bild eine eindeutige Kennung hinzu, um es leichter löschen zu können // Holen Sie sich das Element auf der Seite let input=document.getElementById('file')
    konsole.log(Eingabe);
    // Onchange-Ereignis binden input.onchange=function(){
      var file = this.files[0] //Die auf der Seite ausgewählte Datei abrufen. [N] steht für die Anzahl der abzurufenden Dateien // console.log(file);
      var iLen = this.files.length; //Bildlänge abrufen// console.log(iLen);
      for(var i=0;i<iLen;i++){ //Mehrere Bilder auf der Seite anzeigen oder über eine Schleife hochladen //Lokalen Cache in der Vorschau anzeigen var filereader = new FileReader() //Lokalen Cache-Objekt erstellen //Den lokalen Cache der abgerufenen Datei in bese64 konvertieren
      filereader.readAsDataURL(this.files[i]) //In Base64 konvertieren und im freien Attribut reader.result speichern console.log([i]);
        filereader.onload = function () { //Dieses Ergebnis durch das Onload-Ereignis abrufen // console.log(this.result,333);
        ArrayImg.push(dieses.Ergebnis)
        // Binde das img-Anzeigebild über den html-Tag ein und speichere es in einer Variable let img1=`<div id="divimg"><img src="${this.result}" alt="" id="id_img"></div>`  
        // Erstelle ein neues Div
        let div = Dokument.createElement('div')
        div['index'] = index; // Füge dem div eine eindeutige Kennung hinzu, um es einfach entfernen zu können // Füge das hochgeladene img1 in das neu erstellte div ein div.innerHTML=img1
        console.log(ArrayImg,'Bild-Array');
        //Dann fügen Sie es durch eine DOM-Operation in den DOM-Baum ein, um das Bild anzuzeigen. document.getElementsByTagName('body')[0].appendChild(div) //In den DOM-Baum einfügen// console.log(img);
        // Lösche das aktuell angeklickte Div und die Base64-Adresse im aktuell angeklickten Bild-Array, indem du das Klick-Ereignis an das Div bindest div.onclick = function(){  
                    this.remove(); // Bildelement auf der Seite löschen delete ArrayImg[this.index]; // Daten löschen, die dem ArrayImg-Array entsprechen console.log(ArrayImg,'Image array');
                }
                //inddex zeichnet auf, wie oft die aktuelle Schleife ausgeführt wird, um den Linkadressenindex++ im ArrayImg-Array zu entfernen
      }
      }
    }
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • js, um Bilder auf den Server hochzuladen und sie wiederzugeben
  • So laden Sie Dateien und Bilder in den Node.js-HTTP-Server hoch
  • JSP + Servlet realisiert die Funktion zum Hochladen von Dateien auf den Server
  • NodeJs implementiert einen einfachen WEB-Upload- und Download-Server
  • Detaillierte Erklärung des einzeiligen Node.js-Befehls zum Hochladen lokaler Dateien auf den Server
  • js, um das Beispiel des Hochladens und Anzeigens von Bildern auf den Server zu erreichen
  • Realisieren Sie die Funktion zum Hochladen einer einzelnen Datei auf den Server basierend auf HTML5 + js + Java
  • Verwenden Sie nodejs, um Dateiänderungen zu überwachen und sie per SFTP auf den Server hochzuladen
  • NodeJS kombiniert mit HTML5, um die Methode zum Ziehen und Ablegen mehrerer Dateien zum Hochladen auf den Server zu erreichen
  • Ajax-Upload implementiert die JS-Verarbeitung basierend auf den vom Server zurückgegebenen Daten

<<:  Mysql verwendet Einfügen, um mehrere Datensätze einzufügen und Daten stapelweise hinzuzufügen

>>:  Weitere Möglichkeiten zur Verwendung von spitzen Klammern in Bash

Artikel empfehlen

Details zum JavaScript-Abschluss

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...

Zusammenfassung der benutzerdefinierten JavaScript-Objektmethoden

Inhaltsverzeichnis 1. Verwenden Sie Objekt, um ei...

Lernen Sie schnell die MySQL-Grundlagen

Inhaltsverzeichnis SQL verstehen SELECT verstehen...

Detaillierte Erklärung zur Installation und Verwendung von Vue-Router

Inhaltsverzeichnis Installieren Grundlegende Konf...

3 häufige Fehler beim Lesen von MySQL Binlog-Protokollen

1. mysqlbinlog: [FEHLER] unbekannte Variable „def...

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

Rendern Definieren Sie das Skelett, schreiben Sie...

Beispiel für das Einfügen eines HTML-Bilds (html add image)

Zum Einfügen von Bildern in HTML sind HTML-Tags f...

Docker löscht private Bibliotheksbilder vollständig

Werfen wir zunächst einen Blick auf die allgemein...

Detaillierte Erläuterung der Angular-Routing-Grundlagen

Inhaltsverzeichnis 1. Routing-bezogene Objekte 2....

Zusammenfassung der Blockelemente, Inline-Elemente und variablen Elemente

Blockelement p - Absatz Text vorformatieren Tisch ...