Rectangle 27 0

How to upload file using jquery ajax php?


$.ajax({
                url: "resource/php/upload.php",
                type: "POST",
                data: formdata,
                dataType : 'json',
                processData: false,
                contentType: false,
               //@custome xhr
                xhr: function() {  // custom xhr
                   myXhr = $.ajaxSettings.xhr();
                   if(myXhr.upload){ // check if upload property exists
                       myXhr.upload.addEventListener('progress',progressHandlingFunction,  false); // for handling the progress of the upload
                   }
                   return myXhr;
                },
               //@custome xhr end
                success: function(data) {
                             $('#ajax-loader').hide();
                            //appends the currently uploaded images in  a div
                             }
                });
function updateProgress(evt) {
    console.log('updateProgress');
    if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
    } else {
            // Unable to compute progress information since the total size is unknown
            console.log('unable to complete');
    }
}

See the comment @custome xhr in above code And add a function to update progress bar

You need to write custome xhr function to achieve tracking of progress of file uploads

Note