Fortgeschrittenes Erlernen von Javascript und Formularformularen

Vorwort

Im vorherigen Artikel habe ich das Formular verwendet, um über die Interaktion zwischen Vorder- und Rückseite zu sprechen. Ich habe einige der Verbindungen zwischen dem Browser und dem Server im Formular erläutert Ich habe das Formular gemeistert, aber die Realität ist grausam. In einem kürzlich durchgeführten Projekt habe ich festgestellt, dass es ein großes Wissen über das Formular gibt, auf das ich gerade im vorherigen Artikel geklickt habe. Dieser Inhalt wird an vielen Stellen verwendet, nämlich beim Hochladen von Dateien.

1. FormData

Im vorherigen Artikel wurde erwähnt, dass die Art und Weise, das Formular zu organisieren, darin besteht, die Funktion serializeArray von jquery zu verwenden, diese Methode ist jedoch für input[type="file"] ungültig Es heißt, dass der Inhalt der Datei nicht in das Formular integriert werden kann. Weitere Informationen zu ähnlichen Problemen finden Sie im offiziellen Problem von jquery: https://bugs.jquery.com/ticket/2656. Die Erklärung lautet:

Die Serialisierungsmethode kann den Inhalt der Datei nicht abrufen, daher verstehe ich nicht, warum sie das Dateiformularfeld serialisieren müsste. Sie müssten eine der Ajax-Dateien verwenden Laden Sie Plugins hoch, um die Inhalte über AJAX zu erhalten.

　Können wir also das übermittelte Formular erhalten, ohne ein Plugin zu verwenden? Natürlich!

　1.1. Die Rolle von FormData

　Dies ist das FormData, das wir vorstellen möchten. Gemäß der MDN-Erklärung von FormData:

Die FormData-Schnittstelle bietet eine einfache Möglichkeit, Schlüssel-Wert-Paare zur Darstellung ihrer Felder und Werte zu erstellen, und kann einfach über „XMLHttpRequest.send“ übergeben werden ()`an den Server gesendet. Es verwendet dasselbe Format, als ob der Kodierungstyp des Formulars auf „multipart/form-data“ festgelegt wäre.

FormData-Objekte können mit „for...of“ anstelle von „entries()“ durchlaufen werden: „for (var p of myFormData)“ ist äquivalent zu „for (var p of myFormData. Einträge()“ )`

Diese Erklärung hat mir mindestens zwei Punkte klar gemacht:

FormData kann verwendet werden, um Formulare vom Typ Multipart/Formular-Datenkodierung zu verarbeiten sind im Allgemeinen Formulare mit input[type="file"];

Die Felder in FormData können auf...in überprüft werden. (Dieses Objekt kann nicht mit console.log im Browser gedruckt werden)

Dann werden einige Kinder bestimmt fragen:

use Ist es nicht so? Ist es möglich, FormData zum Senden eines Formulars ohne Eingabe[type="file"] zu verwenden?

Was passiert, wenn Sie FormData verwenden, um ein Formular ohne Eingabe[type="file"], aber mit dem Kodierungstyp x-www-form-urlencoded zu übermitteln?

Wenn ich FormData nicht verwende, kann ich dann kein Formular mit input[type="file"] senden?

Dann verwenden wir Demo, um diese beiden Probleme zu erklären:

Ja, der Codierungstyp ist derzeit multipart/form-data, was die Formularübermittlungsmethode ist. Es wird ungefähr so ​​aussehen:

Wir können sehen, dass diese Codierungstypform anders ist. Wenn Sie express4 oder höher auf der Serverseite verwenden, müssen Sie zusätzliche Middleware installieren, um diese Art von Anfrage zu verarbeiten. Andernfalls finden Sie keine Ihrer Formulardaten in req.body, req.param und req.query. Diese werden später besprochen. Warum empfehlen wir also immer noch nicht, diese Methode zum Einreichen dieser einfachen Formulare zu verwenden (dies ist bei den meisten Websites der Fall):

Sie müssen festgestellt haben, dass das von uns eingereichte Formular nur aus wenigen Zeichen besteht, jedoch mit dem Zusatz Diese Grenzen führen dazu, dass die Formulardaten größer werden, was bedeutet, dass selbst die effizienteste Binärkodierung länger dauert, als wir brauchen, um die Formulardaten direkt in den MIME-Header zu schreiben!

Tipps: x-www-form-urlencoded hat jedoch Schwierigkeiten, diese nicht alphanumerischen Zeichen zu verarbeiten, da der Browser diese nicht alphanumerischen Zeichen in %HH übersetzt, was bedeutet, dass jedes nicht alphanumerische Zeichen werden in %HH umgewandelt. Alphanumerische Zeichen werden durch 3 Bytes ersetzt, was sehr unfreundlich ist, wenn das Formular sehr lang ist und daher mehrteilige/Formulardaten angezeigt werden.

Um die zweite Frage zu beantworten: Wenn das der Fall ist, können wir req.body im Server (express4) sehen:

{ '----- -WebKitFormBoundary5Kj2oSfHZKrZjYjsrnContent -Disposition: form-data; name': '"user"rnrnddrn------WebKitFormBoundary5Kj2oSfHZKrZjYjsrnContent-Disposition: form-data; name="email"rnrndddrn------WebKitFormBoundary5Kj2oSfHZKrZjYjs- -rn' }

Code kopieren
Schauen Sie, wie bitten Sie den Server, ihn zu analysieren? ? ? Das bereitet mir nur Ärger.

Wenn Sie FormData nicht verwenden, können Sie es auch mit reinem AJAX erreichen. Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/. docs/Web/API/XMLHttpRequest/ XMLHttpRequest verwenden#Formulare senden und Dateien hochladen

　1.2 Fazit

Zusammenfassend: Wenn wir ein Formular verwenden, das Eingaben[type="file"] oder viele enthält Nicht-alphanumerische Zeichen Wenn wir dies tun, müssen wir FormData verwenden, um das Formular zu senden, und der Codierungstyp muss multipart/form-data sein. Dann lautet das grob verwendete Beispiel:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <title>testing form group</title>
    <script type="text/JavaScript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/JavaScript">
    function onSubmit(){
        var myForm = document.getElementById(&#39;form&#39;);
        var formData = new FormData(myForm);
        for (var p of formData){
            console.log(p);
        }
        $.ajax({
            type: &#39;POST&#39;,
            url: &#39;/get&#39;,
            data: formData,
            dataType: &#39;json&#39;,
            processData: false,
            contentType: false,
            success: function(data){console.log(data)},
            error: function(jqXHR){console.log(jqXHR)},
        })
    }
    </script>
</head>  
<body>  
    <form action="" method="post" name=&#39;info&#39; id=&#39;form&#39;>
        <input type="text" name="user" />
        <input type="text" name="email" />
        <input type="file" name="file" />
        <input type="file" name="file1" />
    </form>
    <button type="button" name=&#39;submit&#39; onclick="onSubmit()">提交</button>
</body>  
</html>

Hinweis
Unser $.ajax ist mit „processData: false“ und „contentType: false“ konfiguriert, um zu verhindern, dass jquery die Daten weiter verarbeitet:

processData ( Standard: true)

Typ: Boolean

Wenn die über die Datenoption übergebenen Daten standardmäßig ein Objekt sind (technisch gesehen, solange es sich nicht um eine Zeichenfolge handelt), ist dies der Fall verarbeitet und in eine Abfragezeichenfolge konvertiert werden, um dem Standardinhaltstyp „application/x-www-form-urlencoded“ zu entsprechen. Legen Sie „false“ fest, wenn Sie DOM-Bauminformationen oder andere Informationen senden möchten, die Sie nicht konvertieren möchten.

1.3, FormData API
FormData.append(): Einen neuen Wert an einen vorhandenen Schlüssel anhängen oder einen neuen Schlüssel hinzufügen; >FormData.delete(): Löschen Sie ein Schlüssel-Wert-Paar
FormData.entries(): Geben Sie einen Iterator zurück, damit Sie die Schlüssel-Wert-Paare im Objekt durchlaufen können

FormData (): Gibt den ersten Wert eines bestimmten Schlüssels zurück

FormData.getAll(): Gibt ein Array aller Werte eines bestimmten Schlüssels zurück

FormData.has(): Bestimmt, ob der Das FormData-Objekt ist mit einem bestimmten Schlüssel-Wert-Paar

FormData.keys(): Gibt einen Iterator zurück, um die Iteration der Schlüssel aller Schlüssel-Wert-Paare zu ermöglichen

FormData.set(): Ändert einen vorhandenen Schlüssel oder fügen Sie neue Schlüssel-Wert-Paare hinzu

FormData.values(): Gibt einen Iterator zurück, um das Durchlaufen der Werte aller Schlüssel-Wert-Paare zu ermöglichen

2. Über Eingaben[type="file"]

Es gibt ein paar Punkte zu dieser Art von Eingaben, die erwähnt werden müssen, sonst werde ich sie das nächste Mal vergessen:

Mit mehreren Attributen können Sie mehrere Dateien gleichzeitig auswählen und das Attribut „accept“ verwenden, um den entsprechenden MIME-Typ auszuführen.

$(element).files erhält ein Dateiarray. Sie können den Namen der hochgeladenen Datei und die Anzahl der hochgeladenen Dateien abrufen: .name und Länge.

Wenn Sie Dateien hochladen, müssen Sie manchmal den Dateinamen oder das Suffix überprüfen. Dann sind reguläre Ausdrücke hilfreich. Wenn Sie ein Format von xxx überprüfen -. vx.x.{json|yaml} (z. B. Bower-v0.1.json) Dateien, der verwendete reguläre Ausdruck lautet:

Wenn Sie dann das Suffix entfernen, können Sie ersetzen verwenden (/.(json|yaml)$/, ''), um das Suffix zu entfernen. 4. Eine gute Funktion zum Löschen des Formulars ist:

var reg = /^\w+\-v\d+\.{1}\d+\.(json|yaml)$/i;  
/*Check if the user has not selected uploaded file*/
    if ($(Element).val() === ''){
      finalRes.delete('file');
    } else {
      var fileCount = $(Element)[0].files.length;
      for (var i = 0; i < fileCount; i++) {
        if (reg.test($(Element)[0].files[i].name )){
          console.log(&#39;match&#39;);
        }else{
          alert(&#39;上传的文件名格式不正确&#39;);
          return;
        }
      }
    }

Beachten Sie, dass

$(element) das Eingabe-Tag der von Ihnen hochgeladenen Datei darstellt.

function clearAllFields(){
    $(':input','#project-info')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
  }

finalRes ist der Formularwert nach Ihren neuen FormData

3. Express serverseitige Verarbeitung

Nach Express4.x verschoben Da es sich um eine Menge Middleware handelt, müssen Sie diese selbst installieren, um Formulare mit Multipart-/Formulardaten-Codierungstypen verarbeiten zu können. Es gibt viele solcher Pakete, und ich habe mich für die Verwendung der Multiparty-Middleware entschieden. Informationen zu bestimmten Verwendungsmethoden finden Sie auf der offiziellen Website: https://github.com/expressjs/node-multiparty.

Es gibt zwei Möglichkeiten, diese Middleware zu verwenden:



Event-Listening-Formular verwenden

Rückrufformular verwenden

Ich verwende das Rückrufformular im Projekt:

Die Felder und Felder in Dateien sind entsprechend dem Namen organisiert, den Sie im Formular angeben, wobei der Vordergrund steht. Endcode im ersten Abschnitt als Beispiel, das Ergebnis sollte zu diesem Zeitpunkt lauten:

router.post('/get', function(req, res, next) {  
  var form = new multiparty.Form();
  form.parse(req, function(err, fields, files) {
    if (fields === undefined || files === undefined){
      console.log('client send empty data  in posting new project');
      return res.status(200).json({err:"请求数据为空，请重新提交", status:'failure'});
    }
    console.log(fields, files);
    console.log('Upload completed!');
  });
});

Zu diesem Zeitpunkt wurde die Standarddatei gemäß der Erklärung in den Standardordner hochgeladen Wenn uploadDir während der Initialisierung nicht konfiguriert ist, wird es auf der offiziellen Website in os.tmpdir() des Systems hochgeladen.
Was die Implementierung von Ereignistypen betrifft, ist es auch ähnlich. Sie können sich auf die Demo beziehen, die auf der offiziellen Website bereitgestellt wird.

{ user: [ 'test' ], email: [ 'test1' ] } 
{ file: 
   [ { fieldName: 'file',
       originalFilename: 'test.html',
       path: '/home/private/test/QForTTWBipWSPSTpKsUGlRHE.html',
       headers: [Object],
       size: 876 } ],
  file1: 
   [ { fieldName: 'file1',
       originalFilename: 'test1.html',
       path: '/home/private/test/aT5T2B_pkkxEVv5OUzjjCxIB.html',
       headers: [Object],
       size: 558 } ] }