02
04PHP 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.
AJAX
- $("#uploadForm").on('submit',(function(e) {
- $("#uploadForm").find('.progress-bar').removeClass('progress-bar-success')
- .removeClass('progress-bar-danger');
- e.preventDefault();
- $.ajax({
- url: "upload.php",
- type: "POST",
- data: new FormData(this),
- contentType: false,
- cache: false,
- processData:false,
- success: function(data)
- {
- $("#profileImage").html(data);
- },
- error: function()
- {
- },
- xhr: function () {
- var xhr = new window.XMLHttpRequest();
- //Upload progress
- xhr.upload.addEventListener("progress", function (e) {
- if (e.lengthComputable) {
- var percentComplete = (e.loaded || e.position) * 100 / e.total;
- //Do something with upload progress
- console.log(percentComplete);
- $("#uploadForm").find('.progress-bar').width(percentComplete+'%').html(percentComplete+'%');
- }
- }, false);
- xhr.addEventListener('load',function(e){
- $("#uploadForm").find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
- });
- return xhr;
- }
- });
- }));
By Thirumani Raj posted on - 2nd Apr 2016
Social Oauth Login
Personalized Map Navigation
Online Image Compression Tool
Image CompressionAdvertisement
Recent Posts
- « Personalized Map Navigation
- « Remjs solves the problem of mobile terminal adaptation
- « Picture centered vertically
- « Colorful Diwali Wishes Share Via Whatsapp and Facebook
- « Get City and State by ZipCode Using Google Map Geocoding API