1. Function of the FormData object

  1. Emulating an HTML form is equivalent to mapping an HTML form to a form object and automatically stitching the data in the form object into the format of the request parameters.

  2. Asynchronously upload binary files

2. Use of FormData objects

  1. Preparing HTML forms
<form id="form">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="button"/>
</form>
Copy the code
  1. Convert the HTML form to a formData object
var form = document.getElementById('form');
var formData = new FormData(form);
Copy the code
  1. Submit form object
xhr.send(formData);
Copy the code

Note:

  1. A Formdata object cannot be used for A GET request because the object needs to be passed to the SEND method, and the parameters of a GET request can only be placed after the request address.
  2. The bodyParser module on the server side cannot parse the formData object formData, so we need to use the formidable module to parse it.

3. Instance methods of the FormData object

  1. Gets the value of an attribute in the form object
formData.get('key');
Copy the code
  1. Sets the value of an attribute in the form object
formData.set('key'.'value');
Copy the code
  1. Deletes the value of an attribute in the form object
formData.delete('key');
Copy the code
  1. Appends attribute values to the form object
formData.append('key'.'value');
Copy the code

Note: The difference between the set method and the Append method is that in the case of an existing attribute name, the set method overrides the value of the existing key name, and Append retains both values.

4. Upload the FormData binary file

<input type="file" id="file"/>
Copy the code
var file = document.getElementById('file')
// When the user selects a file
file.onchange = function () {
    // Create an empty form object
    var formData = new FormData();
    // Appends the user-selected binary file to the form object
    formData.append('attrName'.this.files[0]); // Configure the Ajax object. The request must be POST
    xhr.open('post'.'www.example.com');
    xhr.send(formData);
}
Copy the code

5. Display the FormData file upload progress

// When the user selects a file
file.onchange = function () {
    // The onProgress event continues to be emitted during file upload
    xhr.upload.onprogress = function (ev) {
        // Current uploaded file size/total file size converts the result to a percentage
        // Assign the result to the width property of the progress bar
        bar.style.width = (ev.loaded / ev.total) * 100 + The '%'; }}Copy the code

6. FormData file upload image instant preview

After we upload the image to the server, the server usually passes the image address to the client as response data. The client can retrieve the image address from the response data and display the image on the page.

xhr.onload = function () {
    var result = JSON.parse(xhr.responseText); var img = document.createElement('img'); img.src = result.src;
    img.onload = function () {
        document.body.appendChild(this); }}Copy the code