02
04
PHP ajax image upload with bootstrap progress bar

I hope that this example of a PHP file upload progress bar will be helpful to PHP  developers who are looking for a simple way to display a file upload progress bar into their online forms and web applications. In my previous post I had created similar image uploader script using jQuery and PHP, I suggest you go through that tutorial, because we will follow the same procedure here, only thing we are going to add is the progress-bar.

php-ajax-image-upload-with-bootstrap-progressbar

AJAX

  1. $("#uploadForm").on('submit',(function(e) {  
  2.     $("#uploadForm").find('.progress-bar').removeClass('progress-bar-success')  
  3.                                     .removeClass('progress-bar-danger');  
  4.     e.preventDefault();  
  5.     $.ajax({  
  6.         url: "upload.php",  
  7.         type: "POST",  
  8.         data:  new FormData(this),  
  9.         contentType: false,  
  10.         cache: false,  
  11.         processData:false,  
  12.         success: function(data)  
  13.         {  
  14.         $("#profileImage").html(data);  
  15.         },  
  16.         error: function()   
  17.         {  
  18.         },  
  19.           xhr: function () {  
  20.                var xhr = new window.XMLHttpRequest();  
  21.                //Upload progress  
  22.                xhr.upload.addEventListener("progress"function (e) {  
  23.                    if (e.lengthComputable) {  
  24.                        var percentComplete = (e.loaded || e.position) * 100 / e.total;  
  25.                        //Do something with upload progress  
  26.                        console.log(percentComplete);  
  27.                     $("#uploadForm").find('.progress-bar').width(percentComplete+'%').html(percentComplete+'%');  
  28.                    }  
  29.                }, false);  
  30.                 xhr.addEventListener('load',function(e){  
  31.             $("#uploadForm").find('.progress-bar').addClass('progress-bar-success').html('upload completed....');  
  32.         });  
  33.                         return xhr;  
  34.            }   
  35.                       
  36.    });  
  37. }));  

By posted on - 2nd Apr 2016

Social Oauth Login

Personalized Map Navigation

Online Image Compression Tool

Image Compression

Advertisement

Recent Posts

Categories