FormData + Ajax implements upload progress monitoring, formdataajax

FormData + Ajax implements upload progress monitoring, formdataajax

What is FormData?

The FormData object can assemble a set of key/value pairs that send requests using XMLHttpRequest. It can send form data more flexibly and conveniently, because it can be used independently of the form. If you set the form encoding type to multipart/form-data, the data format transmitted through FormData is the same as the data format transmitted through the submit () method;

How to Create a FormData object

You can create a FormData object by yourself, and then add a field by calling its append () method, as shown in the following figure:

// Instantiate a formData object var formData = new FormData (); formData. append ("username", "Groucho"); formData. append ("userid", 123456); // The number 123456 is immediately converted to the file box of the file type input [type = file] on the string "123456" // HTML, select formData. append ("userfile", fileInputElement. files [0]); // JavaScript file-like object var content = '<a id = "a"> <B id = "B"> hey! </B> </a> '; // The text of the new file... var blob = new Blob ([content], {type: "text/xml"}); formData. append ("webmasterfile", blob );

Note: The field "userfile" and "webmasterfile" both contain a file. the field "userid" is a number and will be FormData. the append () method is converted to the string type (the Field Type of the FormData object can be Blob, File, or string: if the field type is not Blob or File, is converted to the string type.

Use jQuery's Ajax method to send FormData data

// Record the current time var time = new Date (). getTime (); // record the current progress var percentage = null; // record the current upload speed var velocity = null; // record the size of uploaded files in bytes var loaded = 0; $. ajax ({url: 'url', type: "POST", data: formData, contentType: false, // you must not set the content type processData: false, // data must not be processed xhr: function xhr () {// obtain the native xhr object var xhr =$. ajaxSettings. xhr (); if (xhr. upload) {// Add progress SS event listening xhr. upload. addEventListener ('progress', function (e) {var nowDate = new Date (). getTime (); // refresh status once every second if (nowDate-time> = 1000) {// number of bytes of uploaded files/total number of bytes percentage = parseInt (e. loaded/e. total * 100); // The current size (bytes)-the size (bytes) of the uploaded file one second ago. velocity = (e. loaded-loaded)/1024; if (percentage> = 99) {$ (". hintText "..html ('server is being parsed, please wait a while ');} else {// modify the time of the last record and data size time = nowDate; loaded = e. loaded ;}} else {return ;}, false) ;}return xhr ;}, success: function success (response) {// successful callback }, error: function error (error) {// failure callback }});

Summary

The above section describes how to monitor the upload progress using FormData + Ajax. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!