H5 implement formdata+ajax+ upload progress upload file

Technical points: 1) H5 formData (),2)XMLHttpRequest ()

Using FormData 对象， We can simulate a series of form controls using JS with some key-value pairs, and we can use the XMLHttpRequest Send () method to submit the form asynchronously. The biggest advantage of using FormData compared to normal Ajax is that we can upload binary files asynchronously.

Case:

$INPUTOBJ. Change (function(){    varFile = $ ( This) [0].files[0]; Makedothisfile (file);});functionmakedothisfile (file) {varSize =file.size, type=File.type, name=File.name; //Create a Formdata object    varFormdataa =NewFormData (); //Add FileFormdataa.append (' file ', file); //Add Submit buttonFormdataa.append ("Submit", "Submit"); //creating an Ajax object    varXHR =NewXMLHttpRequest (); Xhr.open (' POST ', ' php/uploadfile.php ',true);//Asynchronous Transfer    //File Upload ProgressXhr.upload.onprogress =function(EV) {//        varPercent = 0; if(ev.lengthcomputable) {percent= * Ev.loaded/ev.total; Console.log (' already uploaded ' +percent); }      }     //Send Requestxhr.send (FORMDATAA); //Execute callback functionXhr.onreadystatechange =Callblack; //executing an AJAX callback function    functionCallblack () {varReadyState = xhr.readystate;//status of the HTTP request        varstatus = Xhr.status;//status Code of the request        //if the HTTP response has been fully received. And the HTTP status code returned by the server, such as 200, indicates success            if(ReadyState = = 4 && Status = = 200) {varResponse = Xhr.responsetext;//the response body received so far for the serverConsole.log (response); }       }; }

Compatibility notes:

Chrome 7+

Firefox (gecko2.0+) 4.0+

Internet Explorer + +

Opera 12+

Safari 5+

H5 implement formdata+ajax+ upload progress upload file