Submitting Form Data Using New HTML5 Methods (FormData)

It is more convenient to submit form data using HTML5's FormData API. 1. It can automatically collect form fields with name attribute or manually add data; 2. It supports submission in multipart/form-data format through fetch or XMLHttpRequest, which is suitable for file upload; 3. When processing files, you only need to append the file to FormData and send a request; 4. Note that the same name field will be overwritten, JSON conversion and no nesting structure need to be handled.

Submitting form data using the new HTML5 method is actually more convenient than before, especially after FormData API. It not only simplifies the process of data collection, but also easily handles complex scenarios such as file uploading, which is particularly suitable for the needs of modern web development.

Collect form data using FormData

FormData is a built-in JavaScript object that can easily collect data in forms. You don't need to manually traverse each input box, and you don't have to worry about encoding issues.

It's very simple to use, just pass in a <form></form> element:

 const form = document.querySelector('form');
const formData = new FormData(form);

In this way, formData contains all field values ​​in the form with name attribute. Note that if a field does not have name , it will not be collected.

If you just want to add some data manually, you can also not bind the entire form:

 const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('age', '25');

Submit FormData to the server

After collecting the data, the next step is to send it to the server. The most common way is to send a POST request in conjunction with fetch or XMLHttpRequest .

Here is an example of submitting with fetch :

 fetch('/submit', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

It should be noted that FormData will be automatically sent in multipart/form-data format, which is a key format that supports file upload. If you are using the JSON interface, you may need to convert it into a normal object first:

 const obj = Object.fromEntries(formData);

However, at this time, be careful if there are multiple fields with the same name (such as multiple selection boxes), the subsequent values ​​will be overwritten by the previous one. Be careful.

It's easier to handle file uploads

In the past, when handling file uploads, we usually needed to use iframes or plug-ins to simulate asynchronous uploads. Now we just need to use FormData directly.

For example, if you want the user to upload avatar:

 <input type="file" name="avatar">

Then read the file in JS and append it to FormData :

 const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('avatar', file);

Then send it out with fetch , and the server can receive it normally. This applies to various types of files such as pictures and PDFs.

If you also want to preview the pictures uploaded by users, you can use FileReader to cooperate with Blob . Although this part is not the content of FormData , it is often used with file operations.

Basically that's it

In general, HTML5's FormData makes front-end processing of forms more intuitive and powerful. Whether it is basic data collection, asynchronous submission, or file upload, it supports it well. And with the support of fetch and modern browsers, the code is also written cleaner.

Of course, there are some details to pay attention to, such as:

• The form field must have name to be collected
• The fields with the same name will be merged (only the last one is retained)
• Nested structures (such as arrays or objects) are not supported

However, these problems have corresponding solutions, and overall, they are very easy to use.

The above is the detailed content of Submitting Form Data Using New HTML5 Methods (FormData). For more information, please follow other related articles on the PHP Chinese website!