Refresh-free file upload using PHP and HTML5 FormData

This article mainly introduces the tutorial of using PHP and HTML5 FormData to implement refresh-free file upload. This article first breaks down the steps of writing the program, and finally gives a complete example. Friends who need it can refer to it

无Refreshing file upload is a common and somewhat complicated problem. A common solution is to construct an iframe.

In HTML5, a FormData object API is provided. Through FormData, a form request can be conveniently constructed and sent through XMLHttpRequest. It is also possible to send files through the FormData object, so uploading without refreshing becomes very simple.

So how to use FormData? Script House will give a brief introduction to this below.

1. Construct a FormData object

If you want to get a FormData object, it is very simple:

var fd = new FormData();

The FormData object only provides one method, append, which is used to add form request parameters to the object.
In current mainstream browsers, FormData can be obtained or modified in the following two ways.
Method 1: Create an empty FormData object, and then use the append method to add key-value pairs one by one. Example:

var fd = new FormData();
fd.append("name", "脚本之家");
fd.append("blog", "http://jb51.net");
fd.append("file", document.getElementById("file"));

This method does not require the existence of the HTML form object.
Method 2: Obtain the form element object and pass it into the FormData object as a parameter. Example:

var formobj = document.getElementById("form");
var fd = new FormData(formobj);

Of course, you can also use the append method to continue adding other parameters to fd.

2. FormData sends a request

Now that I have obtained the FormData object, how do I send a request? The FormData object is mainly used in the send method of the enhanced XMLHttpRequest object. Refer to the following example:

var xhr = new XMLHttpRequest();    
xhr.open("POST" ,"http://jb51.net" , true);
xhr.send(fd);
xhr.onload = function(e) {
  if (this.status == 200) {
    alert(this.responseText);
  }
};

3. Using FormData in jquery

In the ajax method of jQuery , you can also use the FormData method to achieve refresh-free upload. But pay attention to the parameter settings, refer to the following:

$.ajax({
  url: "http://jb51.net",
  type: 'POST',
  data: fd,
  /**
   *必须false才会自动加上正确的Content-Type
   */
  contentType:false,
  /**
   * 必须false才会避开jQuery对 formdata 的默认处理
   * XMLHttpRequest会对 formdata 进行正确的处理
   */
  processData:false
}).done(function(result){
  console.log(result);
}).fail(function(err){
  console.log(err);
});

4. A complete example (including PHP processing example):

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please Follow PHP Chinese website!

Related recommendations:

HTML5 uses DOM for custom control

HTML5 and CSS3 code to implement 3D display of product information

The above is the detailed content of Refresh-free file upload using PHP and HTML5 FormData. For more information, please follow other related articles on the PHP Chinese website!