Usage of FormData object

In this article

1. How to create a FormData object

2. Created through HTML form FormData object

3. Use the FormData object to upload files

4. You can submit forms and upload files through AJAX without using the FormData object

5. Related links

The FormData object can be used to assemble a set of key/value pairs for sending requests usingXMLHttpRequest. It makes sending form data more flexible and convenient because it can be used independently of the form. If you set the encoding type of the form to multipart/form-data, the data format transmitted through FormData is the same as the data format transmitted by the form through thesubmit()method

How Create a FormData objectEdit

You can create a FormData object yourself and then add fields by calling itsappend()method, like this:

var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"// HTML 文件类型input，由用户选择formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 对象var content = 'hey!'; // 新文件的正文...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);

Note:Fields "userfile" and "webmasterfile" both contain a file. Field "accountnum" is of numeric type and will beFormData.append()method is converted to a string type (FormDataThe field type of the object can beBlob,File, or string:If its field type is neither Blob nor File, it will be converted to a string type.

The above example creates aFormDatainstance, containing "username", "accountnum", "userfile" and "webmasterfile" four fields, and then use thesend()method ofXMLHttpRequestto send the form data. The field "webmasterfile" isBlob##. #Type. ABlobobject represents an immutable, raw data-like file object. The data represented by Blob is not necessarily a JavaScript native format. TheFileinterface is based on Blob and inherits from blob. functionality and extends it to support files on the user's system. You can create a Blob object through theBlob()constructor

Create a FormData object from an HTML formEdit

var formData = new FormData(someFormElement); 示例：var formElement = document.querySelector("form");var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement));

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);

EditYou can also use FormData to upload files. When using it, you need to add a file type input to the form:

 Your email address: 
 Custom file label: 
 File to stash:  

var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { var oOutput = document.querySelector("p"), 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.
"; } }; oReq.send(oData); ev.preventDefault(); }, false);

If the FormData object is created through a form, the request method specified in the form will be applied to the method open().You can also directly attach File or Blob type files to the FormData object, as shown below:

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

When using the appned() method, you can send a request through the third optional parameter setting The header

specifies the file name. If no filename is specified (or if this parameter is not supported), the name "blob" will be used.If you set the correct configuration items, you can also use the FormData object through jQuery:

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, // 不处理数据 contentType: false // 不设置内容类型});

The above is the detailed content of Use of FormData in JavaScript objects. For more information, please follow other related articles on the PHP Chinese website!