First mentioned in XHR2 js
Upgrading a series of functions in the XHR2
File upload function One of the most important and we want to introduce is related
xhr2 achieve the download and upload images, video, audio, eliminating the need to install plug-ins to achieve
FormData objects
FormData objects may be assembled by a set of keys for a transmission request XMLHttpRequest / value pairs, it can be used independent of the form, a more flexible form of transmission data.
If you set the form of the encoding type multipart / form-data, through the data format and submit forms FormData transmitted by the same method as the transmission data format ().
Compared with ordinary ajax, use FormData biggest advantage is that you can upload binary files asynchronously
Here's a brief look over the more commonly used methods:
new FormData(form)
Alternatively parameter, a <form> form element on the HTML - When specified, the FormData objects created in this way will automatically form values are also included into the form, including the contents of the file will be coded included.
formData.get(name)
FormData used to return the object and a value associated with the specified key, if you want to return all values associated with specified key, you can use getAll () method.
<!DOCTYPE html>
<html>
<head> <title></title> </head> <body> <form id="myForm" name="myForm"> <label for="name">name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit!" id="submit"> </form> <p>你输出的值为:<span id='text'></span></p> <script type="text/javascript"> var myForm = document.getElementById('myForm'), text = document.getElementById('text'); myForm.addEventListener('submit', function (e) { e.preventDefault(); var oMyForm = new FormData(myForm) text.innerHTML = oMyForm.get('name'); }, false); </script> </body> </html>formData.set(name, value, filename)
| parameter | description |
|---|---|
| name | Field Name |
| value | Field value, if it is passed in the way of two parameters, the value is a USVString, if not, will be transformed into a string. If three parameters are passed in the way, then the value is a Boolean value (Blob), file (File), or a USVString, if not, will be transferred to a string |
| filename | Optional: file name (a USVString) passed to the server. When the second parameter is a Boolean value (Blob) or file (File) when the default file name Blob object is the "blob" |
<!DOCTYPE html>
<html>
<head> <title></title> </head> <body> <form id="myForm" name="myForm"> <label for="name">name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit!" id="submit"> </form> <p>你输出的值为:<span id='text'></span></p> <script type="text/javascript"> var myForm = document.getElementById('myForm'), text = document.getElementById('text'); myForm.addEventListener('submit', function (e) { e.preventDefault(); var oMyForm = new FormData(myForm); oMyForm.set('name', 'abc'); text.innerHTML = oMyForm.get('name'); }, false); </script> </body> </html>formData.append(name, value, filename)
Difference set () and append () is that, if the specified key already exists, set () will use the new values overwrite the existing values, and append () the new value will later added to an existing set of values
| parameter | description |
|---|---|
| name | Data corresponding to the value contained in the form name |
| value | The value of the form. Or it may be USVString Blob (including subtypes, such as File) |
| filename | Optional: file name (a USVString) to the server, and when a Blob or File is used as the second argument, the default file name Blob object is the "blob". The default file name File object is the name of the file |
GetAll ()
This method returns all values FormData objects specified key.
<!DOCTYPE html>
<html>
<head> <title></title> </head> <body> <form id="myForm" name="myForm"> <label for="name">name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit!" id="submit"> </form> <p>你输出的值为:<span id='text'></span></p> <script type="text/javascript"> var myForm = document.getElementById('myForm'), text = document.getElementById('text'); myForm.addEventListener('submit', function (e) { e.preventDefault(); var oMyForm = new FormData(myForm); oMyForm.append('name', 'abcd'); text.innerHTML = oMyForm.getAll('name'); }, false); </script> </body> </html>FormData.entries()
Returns an iterator object that can traverse access FormData in pairs. Wherein the key is a key-value pairs USVString objects; value is a USVString, or Blob object.
FormData.keys()
Returns an iterator (Iterator), traversing all the key formData included, these are key USVString object.
FormData.values()
It returns an iterator to allow the object to traverse all values. These values are USVString or Blob object.
<!DOCTYPE html>
<html>
<head> <title></title> </head> <body> <form id="myForm" name="myForm"> <label for="name">name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit!" id="submit"> </form> <p>你输出的值为:<span id='text'></span></p> <script type="text/javascript"> var myForm = document.getElementById('myForm'), text = document.getElementById('text'), str = ''; myForm.addEventListener('submit', function (e) { e.preventDefault(); var oMyForm = new FormData(myForm);