Mark--[web Frontier--HTML5 Form Data Object Use]

Source: Internet
Author: User

XMLHttpRequest Level 2 Adds a new interface--formdata using FormData 对象, We can simulate a series of form controls using JavaScript with some key-value pairs, and we can also use The XMLHttpRequest Send () method is used to submit the form asynchronously. The biggest advantage of using FormData compared to normal Ajax is that we can upload binary files asynchronously.

Related articles that may be of interest to you
    • 10 popular Metro UI Bootstrap themes and templates
    • Featured 12 excellent jQuery Ajax pagination plugins and tutorials
    • 10 popular Metro UI style Bootstrap Themes
    • 8 beautifully crafted JQuery loading animations and progress bar plugins
    • Recommended 35 exquisite CSS3 and HTML5 Web templates

Create a Formdata object

You can create an empty object first FormData  , and then use append()  the method to add a field to the object, as follows:

12345678910111213141516 var oMyForm = new FormData(); oMyForm.append("username", "Groucho");oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"// fileInputElement中已经包含了用户所选择的文件oMyForm.append("userfile", fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容var oBlob = new Blob([oFileBody], { type: "text/xml"});oMyForm.append("webmasterfile", oBlob);var oReq = new XMLHttpRequest();oReq.open("POST", "http://foo.com/submitform.php");oReq.send(oMyForm);

Note: The values for the field "UserFile" and "Webmasterfile" contain a file. The FormData.append()  number assigned to the field "AccountNum" by the method is automatically converted to a character (the value of the field can be an Blob  object, an File object, or a string, and all other types of values are automatically converted to strings).

In this example, we created a FormData object named Omyform that contains the field names named "username", "AccountNum", "UserFile", and "Webmasterfile", and then uses XMLHttpRequest the The c5/> method sends the data out. The value of the "Webmasterfile" field is not a string, or an Blob  object.

Use an HTML form to initialize a Formdata object

You can initialize with an existing form element by FormData 对象, simply form  passing the element as a parameter to the FormData  constructor:

1 varnewFormData = newFormData(someFormElement);

For example:

1234 varformElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();oReq.open("POST", "submitform.php");oReq.send(newFormData(formElement));

You can also continue to add a new key-value pair, based on the existing form data, as follows:

1234 varformElement = document.getElementById("myFormElement");formData = newFormData(formElement);formData.append("serialnumber", serialNumber++);oReq.send(formData);

This way you can add some fixed fields that you don't want the user to edit, and then send them.

Sending files using the Formdata object

You can also use FormData  to send binary files. First, in HTML, you have a form element that contains a file input box:

12345678910 <form enctype="multipart/form-data" method="post" name="fileinfo">  <label>Your email address:</label>  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />  <label>Custom file label:</label>  <input type="text" name="filelabel" size="12" maxlength="32" /><br />  <label>File to stash:</label>  <input type="file" name="file" required /></form><div id="output"></div><a href="javascript:sendForm()">Stash the file!</a>

You can then use the following code to asynchronously upload a user-selected file:

123456789101112131415161718 function sendForm() {  var oOutput = document.getElementById("output");  var oData = new FormData(document.forms.namedItem("fileinfo"));  oData.append("CustomField", "This is some extra data");  var oReq = new XMLHttpRequest();  oReq.open("POST", "stash.php", true);  oReq.onload = function(oEvent) {    if (oReq.status == 200) {      oOutput.innerHTML = "Uploaded!";    } else {      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";    }  };  oReq.send(oData);}

You can also FormData  add an object File  or an object directly to an object without the help of an HTML form Blob  :

1 data.append("myfile", myBlob);

If a field value in an FormData object is an Blob  object, the value of the Blob  "Content-disposition" request header representing the file name of the object contained in the HTTP request will differ under different browsers when it is sent. Firefox uses a fixed string "blob", and Chrome uses a random string.

You can also use JQuery to sendFormData,但必须要正确的设置相关选项:

123456789 var fd = new FormData(document.getElementById("fileinfo"));fd.append("CustomField", "This is some extra data");$.ajax({  url: "stash.php",  type: "POST",  data: fd,  processData: false// 告诉jQuery不要去处理发送的数据  contentType: false// 告诉jQuery不要去设置Content-Type请求头});
Browser compatibility

Desktop side:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 7+ 4.0 (2.0) + 12+ 5+
Support filename Parameters (Yes) 22.0 (22.0) ? ? ?

Mobile side:

Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 4.0 (2.0)

12+

support filename parameter 22.0 (22.0)

Reference documents:

    • MDN: Using XMLHttpRequest
    • Mdn:xmlhttprequest FormData
    • XMLHttpRequest 2 New Tricks
    • MDN: Using the FormData object
    • W3c:xmlhttprequest Level 2

Mark--[web Frontier--HTML5 Form Data Object Use]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.