FormData + Ajax implement multi-File Upload learn to use FormData object, ajaxformdata

FormData + Ajax implement multi-File Upload learn to use FormData object, ajaxformdata

The FormData object facilitates the serialization of tables and the creation of data in the same format as the form (of course, for XHR transmission.

Today, we use dropzone and FormData to implement The Multifile upload function.

Var SAMP = null; // Dropzone object SAMP = new Dropzone ("# dropzone", {url: "#", // link to the background response maxFiles: 4, // The maximum number of files that can be transferred is currently set to 1 maxFilesize: 2048, // the file size limit is acceptedFiles: ".png, .jpg, .gif, .htm, .bmp", // the file format limit is autoProcessQueue: false, // whether the file is automatically transferred back to the background myAwesomeDropzone: false ,})

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

var myFormData = new FormData()

Create a Form Data object

SAMP.on("addedfile", function(file) {   myFormData.append(file.name, file)})

Register the addedfile event for the Dropzone object. When a file is uploaded, The append () function of the FormData object adds an image object in pairs to myFormData in a key-value pair.

$. Ajax ({type: 'post', url: "#", data: myFormData, processData: false, // * Must write contentType: false, // * Must write success: function (data ){...}, error: function (){...}});

　　

When using the FormData object to transmit data to the background through Ajax, you must set "processData: false, contentType: false," in the options. Otherwise, an error is returned.

ProcessData is set to false. Because the data value is a FormData object, you do not need to process the data.

Set contentType to false. Because it is a FormData object constructed by the <form> form and the attribute enctype = "multipart/form-data" has been declared
False.