FormData – wysyłka formularza za pomocą AJAX

FormData() – zestaw par key/value – typ danych może być file, blog lub string.

https://developer.mozilla.org/en-US/docs/Web/API/FormData

 

Kodowanie: multipart/form-data, wbudowany iterator ( pętla – for…of)

Metody: append(),  delete(), get(), getAll(), set(), has(), keys(), values(), entries()

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456);                   // liczba skonwertowana do string "123456"

formData.append("userfile", fileInputElement.files[0]);  // plik z lokalnego filesystemu

var content = '<a id="a"><b id="b">hey!</b></a>';        // zawartość nowo utworzonego pliku
var blob = new Blob([content], { type: "text/xml"});     // raw data - plik utworzony w locie
formData.append("webmasterfile", blob);   

var request = new XMLHttpRequest();
request.open("POST", "https://foo.com/submitform.php");
request.send(formData);

Wysyłanie istniejącego formularza (przyjmuje kontrolki input z atrybutem name)

var formElement = document.querySelector("form");    // Formularz z DOM
var formData = new FormData(formElement);            // obj. FormData 
formData.append("serialnumber", serialNumber++);     // dodaje pole 

var request = new XMLHttpRequest(); 
request.open("POST", "submitform.php"); 
request.send(formData);                              // wysyłka formularza

Wysyłka formularza bez przeładowania strony – Ajax

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>E-mail:</label>
  <input type="email" autocomplete="on" autofocus name="userid"  maxlength="64" /><br/>
  <label>Podaj etykietę:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br/>
  <label>Wybierz plik:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Wyślij plik!" />
</form>

var form = document.forms.fileinfo;

form.addEventListener('submit', function(ev) {

  var oData   = new FormData(form);

  oData.append("CustomField", "Extra dane");
  oData.append("myfile", myBlob, "filename.txt");   // Dodaje blob jako plik

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) { console.log("Plik wgrany!"); } 
    else { console.log("Error " + oReq.status + " błąd przesyłu."); }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);