HTML5 can preview multi-image Ajax uploads (using Formdata to pass data)

HTML5 can preview multi-image Ajax uploads (using Formdata to pass data)

Before the introduction of the upload image, we simply understand the basic use of the next formdata, after the completion of the basic knowledge, we will provide a demo at the end of the article, that is, Ajax multi-image upload preview before the effect.

1. Basic usage of the Formdata:
First create an empty object instance code as follows:
var formData = new FormData ();

1-1 Getting values
Get the corresponding value via get (key)/getall (key), for example:

Formdata.get ("name"); Gets the first value of the key name. Formdata.getall ("name"); Returns an array that gets all the values for key name.

For example, the following HTML code:

<!    DOCTYPE html> 
1-2 Adding data
The data can be added by append (key, value), and if the specified key does not exist, a new data is added to the end of the data if the key exists.
var formData = new FormData () formdata.append (' name ', ' Kongzhi1 '); Formdata.append (' name ', ' Kongzhi2 '); Formdata.append (' name ', ' Kongzhi3 '); Console.log (Formdata.get (' name ')); Kongzhi1console.log (Formdata.getall (' name ')); ["Kongzhi1", "Kongzhi2", "Kongzhi3"]
1-3 Setting Modification Data
The modification data can be set through set (key, value), if the specified key does not exist, a new one is added, and if present, the corresponding value is modified.
var formData = new FormData () formdata.append ("name", ' Kongzhi1 '); Console.log (Formdata.getall ("name")); ["Kongzhi1"]formdata.set ("name", ' Kongzhi2 '); Console.log (Formdata.getall ("name")); ["Kongzhi2"]
1-4 determine if the data exists
We can use the has (key) to determine whether there is a corresponding key value.
var formData = new FormData (), Formdata.append ("name", ' Kongzhi1 '); Formdata.append ("name2", null); Console.log ( Formdata.has ("name")); Trueconsole.log (Formdata.has ("name2")); Trueconsole.log (Formdata.has ("Name3")); False
1-5 Deleting data
Delete the data by using Delete (key).
var formData = new FormData (), Formdata.append ("name", "Kongzhi1"), Formdata.append ("name", "Kongzhi2"); Console.log ( Formdata.getall ("name")); ["Kongzhi1", "Kongzhi2"]formdata.delete ("name"); Console.log (Formdata.getall ("name")); // []
Second: Uploading files using XMLHttpRequest Formdata
XMLHttpRequest2 defines the Formdata type, and Formdata facilitates the serialization of the form and the creation of the same data as the form format (for XHR data transfer).
Browser support: IE9 and ie9-not supported.
The trial XMLHttpRequest submitted formdata data as follows Demo:
<! DOCTYPE html> 
2-2 use jquery ajax to upload formdata data as follows:
The HTML code is as follows:
<div id= "Container" >  <a href= "javascript:void (0)" class= "file" > select files     <input type= ' file ' id= ' File "Multiple accept = ' image/gif,image/jpeg,image/jpg,image/png '/>     <input type=" hidden "/>   </a ></div>
The JavaScript code is as follows:
var formdata = new Formdata ()///Upload to Server field name Formdata.append ("Imgfile", $ (' #file ') [0].files[0]); $.ajax ({  URL: Self.url,  type: ' POST ',  cache:false,  data:formdata,  timeout:5000,  //must be false to avoid jquery Formdata's default handling   //XMLHttpRequest will handle the formdata correctly  Processdata:false,  // Must be false to automatically add the correct content-type   contenttype:false,  xhrfields: {    withcredentials:true  },  Success:function (data) {  },  error:function (XMLHttpRequest, Textstatus, Errorthrown) {  }
The above parameter setting means the following:
1. Processdata:false, because the data value is a Formdata object, you do not need to do the processing.
2. Cache:false, uploading files does not require caching.
3. Contenttype:false, because it is a Formdata object constructed by the <form> form, and has declared the attribute enctype= "Multipart/form-data", So this is set to false.
4. Xhrfields: {withcredentials:true}, cross-domain request settings
Here is a demo that uses Ajax to formdata multiple images before uploading a preview effect.
FormData A preview of multiple Ajax images before uploading is as follows :
View Effects
HTML5 can preview multi-image Ajax uploads (using Formdata to pass data)