HTML5 FormData with no refresh file Upload Example

Last Update:2017-01-13 Source: Internet

Author: User

Tags file upload

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

No refresh file upload is a common and somewhat complex problem, the common solution is to construct an IFRAME implementation.
In HTML5, a FormData object API is provided, which makes it easy to construct a form request and send it through XMLHttpRequest via FormData. It is also possible to send files through the FormData object, so there is no flash upload to become very simple.
So how does FormData use it? The following is a simple introduction to this blog studio.
1. Construct FormData objects

Want a Formdata object, very simple:

var fd = new FormData ();

The FormData object provides only one method append, which is used to add form request parameters to the object.
In the current mainstream browser, you can get or modify formdata in the following two ways.
Method One: Create an empty Formdata object, and then add the key-value pairs individually by using the Append method. Example:

The code is as follows	Copy Code
var fd = new FormData (); Fd.append ("name", "Zhi Wen studio"); Fd.append ("blog", "Http://www.111cn.net"); Fd.append ("File", document.getElementById ("file"));

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

The code is as follows	Copy Code
var formobj = document.getElementById ("form"); var fd = new FormData (formobj);

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

2. FormData Send Request

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

The code is as follows	Copy Code
var xhr = new XMLHttpRequest (); Xhr.open ("POST", "Http://www.111cn.net", true); Xhr.send (FD); Xhr.onload = function (e) { if (This.status = = 200) { alert (This.responsetext); } };

3. Using FormData in jquery

In the JQuery Ajax method, you can also use the FormData method to achieve no refresh upload. However, to note the parameters of the settings, refer to the following:

code is as follows

copy code

$.ajax ({
    URL: "http://www.111cn.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 (including examples of PHP processing):

The code is as follows

Copy Code

<?php
PHP receives form submission information and prints
if (Isset ($_request[' do ')) {
Var_dump ($_request);
Var_dump ($_files);
Die ();
}

?>
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>formdata test-www.111cn.net</title>
<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<body>
<form id= "Form" >
<input type= "File" name= "file" id= "file"/>
<input type= "text" name= "name" id= "value=" Chi Wen Studio "/>
<input type= "text" name= "blog" id= "value=" Http://www.111cn.net "/>"
<input type= "Submit" Name= "Do" id= "Do" value= "Submit"/>
</form>
<script>
$ ("form"). Submit (function (e) {
E.preventdefault ();

Empty object and then add
var fd = new FormData ();
Fd.append ("name", "Zhi Wen studio");
Fd.append ("blog", "Http://www.111cn.net");
Fd.append ("File", document.getElementById ("file"));
Fd.append ("File", $ (": File") [0].files[0]); JQuery Way
Fd.append ("Do", "submit");

Create a FormData from a form object
var fd = new FormData (document.getElementById ("form"));
var fd = new FormData ($ ("Form:eq (0)") [0]); jquery Way

XMLHttpRequest Native mode Send request
var xhr = new XMLHttpRequest ();
Xhr.open ("POST", "", true);
Xhr.send (FD);
Xhr.onload = function (e) {
if (This.status = = 200) {
alert (This.responsetext);
};
};
Return
JQuery way to send a request
$.ajax ({
Type: "Post",
URL: "",
DATA:FD,
Processdata:false,
Contenttype:false
). Done (function (res) {
Console.log (RES);
});

return false;
});
</script>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More