File submission using form and FormData.

## 1.

Before proceeding with the instructions for file submission, let’s first review the form tag . form has many attributes, here I will only explain the following two attributes:

1, method (enctype is 'application /x-www-form-urlencoded')

In most cases, only GET and POST will be used.

                                                           GET:

When using GET for form submission, the user agent (browser) will automatically process each input component according to name=value (use encodeURIComponent for name and value respectively) Encoding, then use '=' to connect the encoded key-value pairs, and use '&' to connect multiple key-value pairs) to generate a query string, which is connected at the end of the url.

        

②POST: POST will also generate a string that is the same as GET, but this string is Written in the http request header, rather than added to the end of the url.

The main difference between the two is:

GET has a limit on the size of the data submitted, usually 2kb, while POST has no limit in theory (But the actual size is about 2GB).

2. enctype

As mentioned above, the default value of the form is 'application/x-www-form-urlencoded', which is the enctype One of three values. Let's discuss these three values ​​in detail next.

①application/x-www-form-urlencode

: The default value for form submission, the behaviors corresponding to POST and GET have been discussed above and will not be repeated here;

②text/plain:

When taking this value, the form value will not be encoded, but will be submitted to the backend server in plain text. This value is basically unused. Because it cannot provide good support for binary data when submitting files.

③multipart/form-data

: When enctype uses this option, the browser will not encode characters, instead: in units of controls (input, etc.) Split it and add Content-Disposition: form-data, name (name corresponding to the input), filename (if a file is submitted, there will be a changed field), and Content-Type (same as the previous field, submit file exists): file type (easily forged). And also add boundary (delimiter, different browsers are different, and each submission is different)

Finally these The information will be integrated together, encoded into a message and submitted to the server (in the form of binary data).

It should be noted that:

Since the main purpose is to upload files, there are certain requirements for the upload size, so the method can only be selected as POST. If GET is used to upload, then Only a fake path to the file will be submitted. This option is an option that must be used when uploading files. After setting enctype to "multipart/form-data", you can use to upload files. The following is an demo example:

1. <form action="server.js" method="POST" enctype="multipart/form-data">  

2.   <input type="file" name="file0">  

3. ##<input type= "submit" value="upload">

4. ##form>

In addition to using form forms to submit files, usually more ajax is used without refreshing the page. Let’s take a look at how to use ajax to submit files without refreshing the page!

2. FormData

FormData is an API provided by ES, which can be used to implement ajax file submission:

Let’s look at how to use FormData:

var formData = new FormData(); //To create an instance, you can pass in the DOM node corresponding to the form As a parameter, the data in the form will be saved to the formData instance.

formData.append(name, value); //Use the append method and pass in the corresponding key and value

//Other code

Finally, the form Just throw the instance into xhr.send();.

xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData构造函数创建一个FormData的实例 
var formData = new FormData(); 
// formData.append('file0', oInput.value);
//注意，这里的value不是普通的表单value，而是一个file对象 
formData.append('file0', oInput.files[0]); 
xhr.open('POST', 'http://localhost:8080');  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①，而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);

As mentioned above, the value passed in to append is not an ordinary input value, but a file object, the knowledge about file object is limited by the space and will not be explained temporarily. If you are interested, you can search it yourself.

In addition to these, the operation of files is not only the general small-sized files, but also more similar to the operation of large files such as videos by video websites. Just understanding these is not enough to complete these tasks. Also learn the relevant APIs and have a deep understanding of blob objects. You can go and learn by yourself. I will publish a summary of this aspect later.

This article explains the content related to file submission using form and FormData. For more related content, please pay attention to the php Chinese website.

Related recommendations:

DOM operation in JQuery - wrap

django uses request to obtain the parameters sent by the browser

Some thoughts on React this binding

The above is the detailed content of File submission using form and FormData.. For more information, please follow other related articles on the PHP Chinese website!