PHP Classes

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

Recommend this page to a friend!
  Info   View files Example   View files View files (6)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog (1)    
Last Updated Ratings Unique User Downloads Download Rankings
2023-08-16 (9 months ago) RSS 2.0 feedStarStarStarStar 69%Total: 234 All time: 8,104 This week: 82Up
Version License PHP version Categories
ajax-image-upload-wi 1.0.0The PHP License5PHP 5, Files and Folders, AJAX, Global
Description 

Author

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
PHP Programming Innovation award nominee
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
Picture of Adeleye Ayodeji
  Performance   Level  
Name: Adeleye Ayodeji <contact>
Classes: 18 packages by
Country: Nigeria Nigeria
Age: ???
All time rank: 302321 in Nigeria Nigeria
Week rank: 75 Up4 in Nigeria Nigeria Up
Innovation award
Innovation award
Nominee: 13x

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 folder image Files  
File Role Description
Files folder imageimg (1 file)
Files folder imageuploads (1 file)
Accessible without login Plain text file index.php Example Example script
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file upload.php Aux. Auxiliary script

  Files folder image Files  /  img  
File Role Description
  Accessible without login Image file featured.gif Icon Icon image

  Files folder image Files  /  uploads  
File Role Description
  Accessible without login Image file website-developmen...nner_33099-1687.jpg Icon Icon image

 Version Control Unique User Downloads Download Rankings  
 100%
Total:234
This week:0
All time:8,104
This week:82Up
 User Ratings  
 
 All time
Utility:91%StarStarStarStarStar
Consistency:75%StarStarStarStar
Documentation:75%StarStarStarStar
Examples:83%StarStarStarStarStar
Tests:-
Videos:-
Overall:69%StarStarStarStar
Rank:353