Use PHP and HTML5 formdata for no-refresh file upload Tutorial

No-refresh file upload is a common and somewhat complex problem, and the common solution is to construct an IFRAME implementation.

A FormData object API is provided in HTML5, which makes it easy to construct a form request and send it through XMLHttpRequest. It is also possible to send files through the FormData object, so it is very easy to upload without a refresh.

So FormData how to use it? Here is a brief introduction to this phpstudy.

1. Constructing FormData objects

To get a Formdata object, it's simple:

var New FormData ();

The FormData object provides only one method, append, for adding form request parameters to an object.
In the current mainstream browser, Formdata can be obtained or modified in the following two ways.
Method One: Create an empty Formdata object, and then add the key-value pairs individually using the Append method. Example:

var New FormData ();fd. Append ("name", "Phpstudy");fd. Append ("blog", "Http://phpstudy.net"); Append ("File", document.getElementById ("file"));

This method can exist without the need for HTML form objects.
Method Two: Get the form element object and pass it as a parameter into the Formdata object. Example:

var formobj = document.getElementById ("form"); var New FormData (Formobj);

Of course, you can also use the Append method to continue adding additional parameters to FD.

2. FormData Send Request

Get FormData object, how to send a request? The FormData object is primarily used in the Send method of an enhanced XMLHttpRequest object. Refer to the following example:

var New XMLHttpRequest ();    XHRtrue); XHR. Send (FD); XHR function (e)  {if (this.status = =) {    alert (this.  responsetext);  }};

3. Using FormData in jquery

In JQuery's AJAX approach, you can also use the FormData method to implement no-refresh uploads. But be aware of the parameter settings, as follows:

$.ajax ({URL:"Http://phpstudy.net", type:' POST ', DATA:FD,/** * must be false to automatically add the correct content-type*/ContentType:false,  /** * must be false to avoid jquery's default handling of Formdata * XMLHttpRequest will handle the formdata correctly*/ProcessData:false}). Done (function(Result) {Console.log (result);}). Fail (function(Err) {Console.log (err);});

4. A complete example (with PHP processing examples):

<?PHP//PHP receives form submission information and printsif(isset($_request[' Do ']) ){  Var_dump($_request); Var_dump($_files);  die();}? ><! DOCTYPE html>    $("Form"). Submit (function(e) {e.Preventdefault (); //The empty object is then added      varFD =NewFormData (); FD. Append ("name", "Phpstudy"); FD. Append ("blog", "Http://phpstudy.net"); FD. Append ("File", document.getElementById ("File")); //fd.append ("File", $ (": File") [0].files[0]);//jquery modeFd.append ("Do", "submit"); //creating FormData from Form Objects      varFD =NewFormData (document.getElementById ("form")); //var fd = new FormData ($ ("Form:eq (0)") [0]),//jquery mode//xmlhttprequest native mode send request      varXHR =NewXMLHttpRequest (); XHR. Open ("POST", "",true); XHR.Send (FD); XHR. onload =function(e) {if(This.status = = 200) {alert ( this.responsetext);      };      }; return; //JQuery Way to send requests$.Ajax ({type: "Post",//URL: "",DATA:FD,ProcessData:false,ContentType:false      }). Done(function(res) {Console.Log(RES);            }); return false;    }); </script> </body>
Use PHP and HTML5 formdata for no-refresh file upload Tutorial