JS in the use of Formdata upload files, pictures of methods _javascript skills

Source: Internet
Author: User

About Formdata

XMLHttpRequest Level 2 Adds a new interface----FormData

Using the Formdata object, you can use some key-value pairs to simulate a series of form controls, you can use the XMLHttpRequest Send () method to asynchronously submit the form compared with ordinary Ajax, the most advantage of using formdata is that the binary file can be uploaded asynchronously

Formdata objects

Formdata object, you can make a querystring of the name and value of all the form elements and submit to the background. Using the Formdata object can reduce the amount of stitching querystring when submitting using Ajax

QueryString is the query string, and the HTTP query string is in the URL? The value that follows specifies

When a form on a page sends request data to a page in a get manner, such as if the data contains unsafe characters, the browser converts it to a 16-character transfer, such as when the space is converted to% 20 o'clock, and the Web server puts the request data into an QUERY_STRING environment variable. The Request.QueryString method is to remove the corresponding value from this environment variable and convert the character to 16
Uploading files and pictures using Formdata

Create a Formdata empty object, and then add the Key/value using the Append method

var formdata=new formdata ();
 Formdata.append ("name", "John");

If you already have a form form, get the form object and pass in the Formdata object as a parameter

<! DOCTYPE html>
 
 

You can continue to add new key value pairs on the basis of existing form data

var formdata=new formdata ();
 Formdata.append ("Age", "21");

Uploading files using the Formdata object

var formdata=new formdata ($ ("#form1"). [ 0]//Get file Method one
//var formdata=new formdata (); 
Formdata.append ("File", $ ("#file") [0].files[0])//Get File Method two
       $.ajax ({
           type: ' Post ',
           URL: ' # ',
           data: Formdata,
           Cache:false,
           processdata:false,//Do not process the sent data, because the data value is the Formdata object and does not need to be processed
           contenttype:false ,//Do not set Content-type request header
           Success:function () {}
           Error:function () {}
       })

The above is a small set to introduce JS in the use of Formdata upload files, pictures of the method of all the narration, I hope to help you, if you have any questions welcome to my message!

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.