PHP AJAX Image Upload with Progress Bar: Show a progress bar during image file upload

Recommend this page to a friend!

Download

Info

Example

Files

Install with Composer

Download

Reputation

Support forum

Blog

Links

Ratings				Unique User Downloads		Download Rankings
69%				Total: 243		All time: 8,011 This week: 49

Version		License		PHP version		Categories
`ajax-image-upload-wi` 1.0.0		The PHP License		5		PHP 5, Files and Folders, AJAX, Global

Description

Author

Adeleye Ayodeji

This package can show a progress bar during image file upload.

It provides an example Web page that shows a form to pick an image file to upload and JavaScript code to update a progress bar to show a percentage of how much of the whole has been uploaded.

The package also provides a PHP script to process the uploaded file on the server side.

Innovation Award

August 2023
Number 6

Many sites need to process image files uploaded by users using Web forms.

When the image files are large, uploading may take a long time.

In that case, it would be better to show a progress bar to let the users know how is the image file upload process going.

This package shows how to use AJAX support and the progress event to offer a percentage of the file uploaded to the server.

Manuel Lemos

Adeleye Ayodeji

Performance

Level

Name:	Adeleye Ayodeji `<contact>`
Classes:	30 packages by Adeleye Ayodeji
Country:	Nigeria

Level 1

Innovation award

Nominee: 18x

Example


<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>


    <title>Progress Bar Upload</title>


</head>


<body>


    <div class="container p-5 text-center">


        <div class="header bg-primary p-4 rounded text-white w-50 mx-auto">Ajax Image Upload with Progress Bar</div>


        <form id='uploadform'>


            <label style="display: block;">


                <img id="uploadimage2" src="img/featured.gif" style="width: 300px;


                height: 300px;


                cursor: pointer;


                object-fit: cover;


                object-position: center top;


                padding: 6px;


                border-radius: 13xp;


                border: 1px solid;


                border-radius: 6px;


                margin: 11px;">


                <input type="file" name="filename" style="display: none;" id="uploadimage_src" onchange="imagepreview_upload(event)">


            </label>


            <div class="container w-50 mx-auto" id="progress" style="display: none;">


            <hr>


            <div class="progress" style="height: 26px;">


                 <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">Uploading (0%)</div>


                </div>


              <hr>  


            </div>


            <div class="form-group">


                <input type="submit" value="Upload" class="btn btn-primary">


            </div>


        </form>


       


    </div>


    <script>


        //Declaring the ajax on submit function


       $(document).ready(function () {


           $(uploadform).submit(function (e) { 


                var progress = $('.progress-bar');


                var progressCon = $('#progress');


               e.preventDefault();


               if ($('#uploadimage_src').val() == '') {


                   alert('Please selet file');


                   return;


               }


               $.ajax({


                   type: "POST",


                   url: "upload.php",


                   data: new FormData(uploadform),


                   cache:false,


                   contentType: false,


                   processData: false,


                   beforeSend: () => {


                        console.log('Image processing');


                        $(progressCon).slideDown();


                   },


                   xhr: function() {


                    var xhr = new window.XMLHttpRequest();


                    xhr.upload.addEventListener("progress", function(evt) {


                        if (evt.lengthComputable) {


                            var percentComplete = (evt.loaded / evt.total) * 100;


                            console.log(percentComplete);


                            //Do something with upload progress here


                            $(progress).attr("aria-valuenow", percentComplete.toFixed(0));


                            $(progress).width(percentComplete.toFixed(0)+'%');


                            $(progress).text('Uploading ('+percentComplete.toFixed(2)+'%)');


                        }


                    }, false);


                    return xhr;


                    },


                   success: function (response) {


                       console.log(response);


                       $(progress).text('Uploaded (100%)');


                       $(progress).addClass('bg-success');


                       $('#uploadimage2').attr('src', 'img/featured.gif');


                       setTimeout(() => {


                           $(progressCon).fadeOut(() => {


                            $(progress).removeClass('bg-success');


                            $(progress).addClass('bg-primary');


                            $(progress).attr("aria-valuenow", '0');


                            $(progress).width('0%');


                            $(progress).text('Uploading (0%)');


                           });


                       }, 3000);


                   }


               });


           });


       });





       function imagepreview_upload(event) {


            var reader = new FileReader();


            var imagefield = document.getElementById('uploadimage2');





            reader.onload = function() {


                if (reader.readyState == 2) {


                    imagefield.src = reader.result;


                    // console.log(reader.result);


                }


            }


            reader.readAsDataURL(event.target.files[0]);





        }


    </script>


</body>


</html>

Details

Ajax-Image-Upload-WIth-Progress-Bar

Easily upload your images, files along with a progress bar. Really cool stuff

Files (6)

File	Role	Description
`img` (1 file)
`uploads` (1 file)
`index.php`	Example	Example script
`LICENSE`	Lic.	License text
`README.md`	Doc.	Documentation
`upload.php`	Aux.	Auxiliary script

Files (6)

img

File	Role	Description
`featured.gif`	Icon	Icon image

Files (6)

uploads

File	Role	Description
`website-developmen...nner_33099-1687.jpg`	Icon	Icon image

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.

Install with Composer

	ajax-image-upload-wi-2023-08-16.zip 115KB
	ajax-image-upload-wi-2023-08-16.tar.gz 116KB
	Install with Composer

Version Control

Unique User Downloads

Download Rankings

100%

Total:	243
This week:	0

All time:	8,011
This week:	49

User Ratings

	All time
Utility:	91%
Consistency:	75%
Documentation:	75%
Examples:	83%
Tests:	-
Videos:	-
Overall:	69%
Rank:	360

Applications that use this package

No pages of applications that use this class were specified.

If you know an application of this package, send a message to the author to add a link here.

About us

Advertise on this site

For more information send a message to info at phpclasses dot org.