JQuery listens to the file upload to implement the progress bar effect, jquery progress bar

JQuery listens to the file upload to implement the progress bar effect, jquery progress bar

Principle:

Bind the onprogress Method to the upload attribute of the XMLHttpRequest object to listen to the upload process.

Var xhr = new XMLHttpRequest (); xhr. upload. onprogress = function (e ){}

Because the XMLHttpRequest object used by jQuery by default is internally generated and cannot be directly bound to the xhr of jq to the onprogress method.

Therefore, you only need to re-generate an XMLHttpRequest object bound with onprogress for jQuery.

First, encapsulate a method to pass in a listener function and return an XMLHttpRequest object bound to the listener function.

Var xhrOnProgress = function (fun) {xhrOnProgress. onprogress = fun; // bind the listener // use the closure to enable listening to bind the return function () {// through $. ajaxSettings. xhr (); get the XMLHttpRequest object var xhr =$. ajaxSettings. xhr (); // determine whether the listener function is a function if (typeof xhrOnProgress. onprogress! = 'Function') return xhr; // if a listener function is available and the xhr object supports binding, bind the listener function to if (xhrOnProgress. onprogress & xhr. upload) {xhr. upload. onprogress = xhrOnProgress. onprogress;} return xhr ;}}

Use the $. ajax Method for upload

$. Ajax ({url: url, type: 'post', xhr: xhrOnProgress (function (e) {var percent = e. loaded/e. total; // calculate percentage })});

You can bind a Custom listening function to the progress bar of the HW. js file upload tool and upload real-time Preview (HTML5 implementation requires no server). HW. js

<Div id = "cover" class = "HW_upload"> select the file to be uploaded </div> <script> var upload = new HW. widget. upload. create ({target: '# cover', // specify the upload control url: "/upload. php ", // upload address // set the size of the file to be uploaded in kb. The default value is 4096. maxSize: 2048. // enable Multifile upload (mult: false, // set the upload button text uploadText: 'select the file to be uploaded ', // sets the upload time-out limit to 20 minutes by default. timeout: 20, // set the default file type that can be uploaded to ['png ', 'jpg', 'jpeg '] // accept: ['jpg'], // set the default file upload parameter name to HW_upload_input inputName: 'cover'. // If the control is set to true or false for Image Upload, file preview isImage: true is disabled, // The custom file check function detects the file size type by default. // fileCheck: function (file) {return true ;}, viewSize: [500,300], // set the default width and height of the image preview box to 400,300 viewImageWidth: 70, // set the default width of the preview image to 80 done: function (data) {alert (data ); // obtain the data returned by the server after the upload is complete }});

The above is all the content of jQuery's method for listening to file uploads to achieve progress bar effects. I hope you can provide more support ~