JS Tutorial Implementation percent progress when loading pictures

Ideas:
The idea is actually very simple, when Ajax executes, an event object is generated that contains the size of the file to be loaded and the size of the currently loaded complete section, which calculates the percentage by both values

Event description
OnProgress triggered when the browser is loading media data
OnLoad triggers when loading media data is complete after the OnProgress event

A picture: All the values contained in the event object, where total is the overall size, loaded is the size that has been loaded (the progress information shown in the figure for loading a picture of 7M)

Demo

<script src= "Http://file.leeye.net/jquery.js" ></script> <script> var xhr = createxhr ();          Xhr.onload = function (event) {if (xhr.status >= && xhr.status <) | | xhr.status = 304) {      alert (Xhr.responsetext);      }else{//alert (' Request was unsuccessful: ' + Xhr.status ');      }}//Thousand Feng php-php training xhr.onprogress = function (event) {var progress = ';      var divstauts = document.getElementById ("status");      Console.log (event);          if (event.lengthcomputable) {progress = "" +math.round (100*event.loaded/event.total) + "%";      divstauts.innerhtml = "Recevied" + Progress + "of" + Event.total + "bytes";      }} function Createxhr () {var xhr = null;      try {//Firefox, Opera 8.0+, safari,ie7+ xhr = new XMLHttpRequest ();          } catch (E) {///Internet Explorer try {xhr = new ActiveXObject ("Msxml2.xmlhttp"); } catch(e) {try {xhr = new ActiveXObject ("Microsoft.XMLHTTP");              } catch (e) {xhr = null;  }}} return xhr;      } function upload () {url = ' http://file.leeye.net/test.jpg ' xhr.open (' get ', url, true);      Xhr.send (NULL);  $ (' img '). attr (' src ', url). Show (); } </script> <button>up</button> <div id= "status" ></div> 

JS Tutorial Implementation percent progress when loading pictures