Formdata upload multiple images, learn to use Formdata

The Formdata object is facilitated for serializing tables and for creating the same data as the form format, which is, of course, for XHR transmissions.

Today we use Dropzone and formdata to implement multi-file upload capabilities.

var SAMP = null;        Dropzone object      SAMP = new Dropzone ("#dropzone",    {              URL: "#",  //Background response link              maxfiles:4,/    / The maximum number of files that can be transferred is  currently set to 1              maxfilesize:2048,//File size limit              acceptedfiles: ". Png,.jpg,.gif,.jpeg,.bmp",// File format Restrictions              Autoprocessqueue:false,  //files are automatically passed back to background              myawesomedropzone:false,    })

We set the file not to upload automatically, but through the control button to implement the upload function. First we create a Dropzone object, set the maximum number of uploaded files, file size, and so on.

  var myformdata = new FormData ()

Create a form data object

Samp.on ("Addedfile", function (file) {    myformdata.append (file.name, file)})

Registers the Addedfile event with the Dropzone object, and when the file is uploaded, the append () function of the Formdata object is the addition of the image object to the Myformdata pairs in the form of a key-value pair.

$.ajax ({
Type: ' POST ', url: "/upload-img/", Data:myformdata,            processdata:false,//* must write            contenttype:false,//* must write
Success:function (data) {

...
},
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {
...
}
});

When using the Formdata object to pass data through Ajax to the background, you must set the "Processdata:false,contenttype:false," two items in the option, or you will get an error.

　　processDataSet to false . Because the data value is an FormData object, you do not need to process the data.

contentType set to false . This is set to false because it is an <form> object constructed by a form, and the FormData property has already been declared enctype="multipart/form-data" 　　.

Formdata upload multiple images, learn to use Formdata