jquery implementation drag file upload plus progress bar

Through the file drag implementation of the file upload, the main use is HTML5 OnDrop event, upload content channel Formdata transmission:

progress bar <div class= "Parent-dlg" >  <div class= "Progress-label" >0%</div>  <div class= "Son" ></div></div>//to drag to the place <div class= "Main_content_center" ></div>

Js:

var dz = $ (' #main_content_center ');d z.ondragover = function (EV) {//prevents the browser from opening the file by default Ev.preventdefault ();}  Dz.ondrop = function (EV) {ev.preventdefault ();  var files = ev.dataTransfer.files;  var len = files.length,i = 0;      while (I < len) {var filesname=files[i].name;      var extstart=filesname.lastindexof (".");      var ext=filesname.substring (extstart,filesname.length). toUpperCase (); if (ext!= ". JPG "&&ext!=". PNG "&&ext!=". XML ") {//Determine if the required type of Ts.erroralert (" Please select a. jpg,. png,. xml type File Upload!        ");      return false;      }else{Test (files[i]);  } i++; } $ (". Parent-dlg"). Show ();}  function Test (a) {var formData = new FormData ();  Formdata.append ("name", A.name);  Formdata.append ("size", a.size);  Formdata.append ("Data", a); $.ajax ({url: ', type: ' Post ', Data:formdata, Cache:false, Processdata:false, Contenttype:false, XH    R:function () {var xhr = $.ajaxsettings.xhr ();     if (onprogress && xhr.upload) {Xhr.upload.addEventListener ("Progress", onprogress, false);    return XHR;     }}})};function OnProgress (evt) {var loaded = evt.loaded;      Already uploaded size condition var tot = evt.total;  Total size of the attachment var per = Math.floor (100*loaded/tot);  The percentage that has been uploaded $ (". Progress-label"). html (per + "%");  $ (". Son"). css ("width", per + "%");      if (per>=100) {$ (". Parent-dlg"). Hide (); } }

Progress bar CSS:

This content is only a approximate file upload technology direction, can be based on their own projects to improve!

　

jquery implementation drag file upload plus progress bar