jquery Monitor File upload method to achieve progress bar effect _jquery

Principle:

Upload Property binding OnProgress method for XMLHttpRequest objects to monitor the upload process

var xhr=new xmlhttprequest (); Xhr.upload.onprogress=function (e) {}

Because the XMLHttpRequest object that jquery uses by default is an internally generated XHR binding OnProgress method that cannot be directly given to JQ

So just regenerate jquery a XMLHttpRequest object that is bound to the onprogress to achieve

First encapsulates a method to pass in a listener function to return a XMLHttpRequest object that is bound to a listener function

var xhronprogress=function (fun) {
  xhronprogress.onprogress = fun;//binding listening
  //using closure to implement listening binding return
  function () {
    //through $.AJAXSETTINGS.XHR (); Get XMLHttpRequest object
    var xhr = $.ajaxsettings.xhr ();
    Determine if the listener function is a function
    if (typeof xhronprogress.onprogress!== ' function ') return
      xhr;
    If there is a listener function and the XHR object supports binding, the listener function is bound to the If
    (xhronprogress.onprogress && xhr.upload) {
      xhr.upload.onprogress = xhronprogress.onprogress;
    }
    Return XHR
  }
}

Use the $.ajax method when uploading

$.ajax ({
  url:url,
  type: ' POST ',
  xhr:xhronprogress (function (e) {
    var percent=e.loaded/e.total;// Percent calculated
  })
});

Use the Hw.js File Upload tool with a progress bar effect support binding custom listener function, support upload real-time preview (HTML5 implementation without server) Hw.js

<div id= "Cover" class= "Hw_upload" > Please select the file to upload </div>
<script>
var upload= new HW. Widget.upload.Create ({
  target: ' #cover ',//Specify the
  URL of the upload control: "/upload.php",//upload address
  //Set the file size to allow uploading is KB default to 4096
  maxsize:2048,//
  open multiple file upload
  mult:false,//
  Set upload button text
  uploadtext: ' Please select file to upload ',//
  set upload timeout limit The unit is minutes default to 20 minutes
  timeout:20,
  //Set the file type allowed to upload defaults to [' PNG ', ' jpg ', ' jpeg ']
  //accept:[' jpg '],
  // Set File upload parameter name defaults to Hw_upload_input
  inputname: ' cover ',
  //set control for picture upload defaults to False when the file preview does not open
  isimage:true, //
  Custom file Check function default detect file size type
  //filecheck:function (file) {return true;},
  viewsize:[500,300],//set picture preview box wide Height The default is 400,300
  viewimagewidth:70,//set preview picture width defaults to
  done:function (data) {
    alert (data);//Get the data returned by the server after the upload is completed
  }
});

The above is small series for everyone to bring the jquery monitor file upload to achieve progress bar effect of the whole content of the method, I hope that we support cloud Habitat Community ~