Über Formdata
Xmlhttprequest Level 2 hat eine neue Schnittstelle hinzugefügt --- FormData
Mit FormData-Objekt können Sie eine Reihe von Formularsteuerungen mit einigen Schlüsselwertpaaren über JS simulieren. Sie können die Send () -Methode von XMLHTTPrequest verwenden, um Formulare asynchron einzureichen. Im Vergleich zu gewöhnlichen AJAX besteht der größte Vorteil der Verwendung von FormData darin, dass Binärdateien asynchron hochladen können.
FormData -Objekt
Das FormularData -Objekt kann eine Abfragestrierung des Namens und des Wertes aller Formularelemente bilden und es dem Hintergrund übermitteln. Die Verwendung von FormData -Objekten kann die Arbeitsbelastung von Anfragen beim Senden mit AJAX verringern
QueryString ist eine Abfragezeichenfolge, HTTP -Abfrage -Zeichenfolge stammt aus der URL? Der folgende Wert gibt an
Wenn das Formular auf der Seite angeforderte Daten im GET -Modus an die Seite sendet (wenn die Daten unsichere Zeichen enthalten, wandelt der Browser sie zunächst in Hexadezimalzeichen um und überträgt sie dann, z. Mit der Methode der Request.queryString können Sie den entsprechenden Wert aus dieser Umgebungsvariablen herausnehmen und die in Hexadezimal konvertierten Zeichen wiederherstellen.
Laden Sie Dateien und Bilder mit FormData hoch hoch
Erstellen Sie ein Formatelement für das leere Objekt und fügen Sie dann mit der Anhang -Methode Schlüssel/Wert hinzu
var formdata = new formData (); FormData.Append ("Name", "Zhang San");Wenn es bereits eine Formularform gibt, holen Sie sich das Formularobjekt und geben Sie es als Parameter in das Formdata -Objekt ein
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <body> <form name = "Form1" id = "Form1"> <input id = "file" type = "Datei" name "name" Form = document.getElementById ("Form1"); var formdata = new FormData (Form); </script> </body> </html>Sie können weiterhin neue Schlüsselwertpaare basierend auf vorhandenen Formulardaten hinzufügen.
var formdata = new formData (); FormData.Append ("Alter", "21");Laden Sie Dateien mithilfe von FormData -Objekten hoch hoch
var formdata = new FormData ($ ("#Form1"). [0]); // Dateimethode eins // var formData = new FormData (); //FormData.Append("file ", $ ("#Datei ") [0] .files [0]); // Dateimethode zwei $ $ .ajax ({Typ: 'post', url: '#', Daten: FormDaten, cache: false, processdata: false, //. Setzen Sie nicht den Erfolg des Inhaltsanforderungs-Headers: Funktion () {} Fehler: function () {}})Das obige ist die vollständige Beschreibung der Methode zur Verwendung von FormData zum Hochladen von Dateien und Bildern in JS, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht!