[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects [Back]  [Original]

FormData - API | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

FormData

FormData / , XMLHttpRequest. FormData , / . , , submit() , enctype="multipart/form-data".

In this article

FormData

FormData, , append():

js
var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //  123456     "123456"

// ,  
formData.append("userfile", fileInputElement.files[0]);

// JavaScript Blob 
var content = '<a id="a"><b id="b">hey!</b></a>'; //   ...
var blob = new Blob([content], { type: "text/xml" });

formData.append("webmasterfile", blob);

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

: "userfile" "webmasterfile" . , "accountnum" . FormData.append() ( Blob, File, : Blob, File, ).

FormData, "username", "accountnum", "userfile" "webmasterfile". FormData send() XMLHttpRequest. "webmasterfile" Blob. Blob - , "" . Blob javascript. File Blob, . Blob Blob() constructor.

FormData HTML

FormDat, (<form>) FormData:

: FormData , name.

js
var formData = new FormData(someFormElement);

:

js
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

FormData :

js
var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

, , , .

FormData

FormData. <input> file .

html
<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input
    type="email"
    autocomplete="on"
    autofocus
    name="userid"
    placeholder="email"
    required
    size="32"
    maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

:

js
var form = document.forms.namedItem("fileinfo");
form.addEventListener(
  "submit",
  function (ev) {
    var oOutput = document.querySelector("div"),
      oData = new FormData(form);

    oData.append("CustomField", "This is some extra data");

    var oReq = new XMLHttpRequest();
    oReq.open("POST", "stash.php", true);
    oReq.onload = function (oEvent) {
      if (oReq.status == 200) {
        oOutput.innerHTML = "Uploaded!";
      } else {
        oOutput.innerHTML =
          "Error " +
          oReq.status +
          " occurred when trying to upload your file.<br />";
      }
    };

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

: method, , , open()

File Blob FormData:

js
data.append("myfile", myBlob, "filename.txt");

append() 3 - , Content-Disposition . ( ) "blob".

FormData jQuery:

js
var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false, //  jQuery    
  contentType: false, //  jQuery    
});

AJAX FormData

AJAX FormData, /ru/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#Submitting_forms_and_uploading_files


Web Proxy Viewer  |  New URL  |  Original Page