Exemple de multipart/form-data

Question

Exemple de multipart/form-data

Demandé el 21 de Novembre, 2010: Quand la question a-t-elle été
310878 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je me demande si quelqu'un peut partager avec moi un exemple de multipart/form-data qui contient :

Quelques paramètres de formulaire
Fichiers multiples

Demandé el 21 de Novembre, 2010 par user496949

5 votes

Allez-y : w3.org/TR/html401/interact/forms.html#h-17.13.4 Sur 17.13.4 Form content types vous trouverez ce que vous cherchez.

Commenté el 21 de Novembre, 2010 par Andrew Barber

1 votes

Voir htmlcodetutorial.com/forms/form_enctype.html

Commenté el 12 de Avril, 2011 par David d C e Freitas

0 votes

Duplicata possible de À quoi doit ressembler une requête HTTP multipart avec plusieurs fichiers ?

Commenté el 7 de Mai, 2014 par Ciro Santilli

Afficher 1 autres commentaires

Answer 1

3 Réponses

Answer 2

162voto

Ciro Santilli Points 3341

EDITAR : Je maintiens une réponse similaire, mais plus approfondie, à l'adresse suivante : https://stackoverflow.com/a/28380690/895245

Pour voir exactement ce qui se passe, utilisez nc -l ou un serveur ECHO et un agent utilisateur comme un navigateur ou cURL.

Sauvegarder le formulaire dans un .html fichier :

<form action="http://localhost:8000" method="post" enctype="multipart/form-data">
  <p><input type="text" name="text" value="text default">
  <p><input type="file" name="file1">
  <p><input type="file" name="file2">
  <p><button type="submit">Submit</button>
</form>

Créez des fichiers à télécharger :

echo 'Content of a.txt.' > a.txt
echo '<!DOCTYPE html><title>Content of a.html.</title>' > a.html

Cours :

nc -l localhost 8000

Ouvrez le HTML sur votre navigateur, sélectionnez les fichiers et cliquez sur soumettre et vérifiez le terminal.

nc imprime la demande reçue. Firefox envoyé :

POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:29.0) Gecko/20100101 Firefox/29.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: __atuvc=34%7C7; permanent=0; _gitlab_session=226ad8a0be43681acf38c2fab9497240; __profilin=p%3Dt; request_method=GET
Connection: keep-alive
Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266
Content-Length: 554

-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="text"

text default
-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="file1"; filename="a.txt"
Content-Type: text/plain

Content of a.txt.

-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="file2"; filename="a.html"
Content-Type: text/html

<!DOCTYPE html><title>Content of a.html.</title>

-----------------------------9051914041544843365972754266--

Alternativement, cURL devrait envoyer la même requête POST que votre formulaire de navigateur :

nc -l localhost 8000
curl -F "text=default" -F "file1=@a.html" -F "file1=@a.txt" localhost:8000

Vous pouvez faire plusieurs tests avec :

while true; do printf '' | nc -l localhost 8000; done

Répondu el 7 de Mai, 2014 par Ciro Santilli (3341 Points )

Answer 3

37voto

pippo Points 157

Merci beaucoup à la réponse de @Ciro Santilli ! J'ai trouvé que son choix de frontière est assez "malheureux" à cause de tous ces traits d'union : en fait, comme @Fake Name l'a commenté, lorsque vous utilisez votre frontière à l'intérieur d'une requête, elle est accompagnée de deux traits d'union supplémentaires :

Ejemplo:

POST / HTTP/1.1
HOST: host.example.com
Cookie: some_cookies...
Connection: Keep-Alive
Content-Type: multipart/form-data; boundary=12345

--12345
Content-Disposition: form-data; name="sometext"

some text that you wrote in your html form ...
--12345
Content-Disposition: form-data; name="name_of_post_request" filename="filename.xyz"

content of filename.xyz that you upload in your form with input[type=file]
--12345
Content-Disposition: form-data; name="image" filename="picture_of_sunset.jpg"

content of picture_of_sunset.jpg ...
--12345--

J'ai trouvé sur cette page w3.org qu'il est possible d'encapsuler un en-tête multipart/mixed dans un multipart/form-data, en choisissant simplement une autre chaîne de délimitation à l'intérieur de multipart/mixed et en utilisant celle-ci pour encapsuler les données. A la fin, vous devez "fermer" toutes les frontières utilisées dans FILO afin de fermer la requête POST (comme :

POST / HTTP/1.1
...
Content-Type: multipart/form-data; boundary=12345

--12345
Content-Disposition: form-data; name="sometext"

some text sent via post...
--12345
Content-Disposition: form-data; name="files"
Content-Type: multipart/mixed; boundary=abcde

--abcde
Content-Disposition: file; file="picture.jpg"

content of jpg...
--abcde
Content-Disposition: file; file="test.py"

content of test.py file ....
--abcde--
--12345--

Jetez un coup d'œil au lien ci-dessus.

Répondu el 11 de Septembre, 2017 par pippo (157 Points )

Answer 4

2voto

Varvara Sandakova Points 61

Il existe un exemple de données multipart (Angular) :

trip-upload.component.html

Voyage :

   <div class="form-group">
     <label for="guide">Guide for the trip:</label>
     <input formControlName="guide" type="file" id="guide" name="guide" (change)="uploadFile($event,'guide')">
   </div>

   <div class="form-group">
     <label for="photo">Guide for the trip:</label>
     <input formControlName="photo" type="image" id="photo" name="photo" (change)="uploadFile($event, 'photo')">
   </div>

   <div class="form-group">
     <button class="btn">Upload files</button>
   </div>
 </form>

2. trip-upload.component.ts

import {Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'trip-upload',
  templateUrl: './trip-upload.component.html',
  styleUrls: ['./trip-upload.component.css']
})

export class TripUploadComponent implements OnInit {
  public form: FormGroup;

  constructor(public fb: FormBuilder, private http: HttpClient) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: [''],
      photo: [null],
      guide: [null]
    })
  }

  uploadFile(event, fileType: string) {
    this.updateFileFormControl(event, fileType);
  }

  submitForm() {
    let formData: any = newFormData();
Object.keys(this.form.controls).forEach(formControlName => {
      formData.append(formControlName, this.form.get(formControlName).value);
    });

    this.http.post('http://localhost:4200/api/trip', formData).subscribe(
            (response) =>console.log(response),
            (error) =>console.log(error)
        )
  }

  private updateFileFormControl(event: Event, formControlName: string) {
    const file = (event.target as HTMLInputElement).files[0];
    this.form.controls[formControlName].patchValue([file]);
    this.form.get(formControlName).updateValueAndValidity()
  }
}

Réponse multipartite

Lorsque le navigateur comprend quel enctype vous utilisez dans votre formulaire pour les demandes HTTP POST, l'agent utilisateur configure une liste de paires nom/valeur au serveur. Selon le type et la quantité de données transmises, l'une des méthodes sera plus efficace que l'autre :

Répondu el 19 de Juillet, 2021 par Varvara Sandakova (61 Points )

Exemple de multipart/form-data

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Exemple de multipart/form-data

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: