CODEWITHSUNDEEP
javascriptphpajaxxmlhttprequest
user3653474
user3653474

Reputation: 3854

Progress bar does not work in XMLHTTPRequest

I want to upload image in php but at the same time show progress status, in the following code using XMLHttpRequest the image is uploading properly but i cannot see the progress bar moving.

Here is my code. Please help to solve my issue.

<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <style type="text/css">
   .progress {
    display: block;
    text-align: center;
    width: 0;
    height: 20px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}
   </style>
<script type="text/javascript">

$(document).ready(function(){

$(document.body).on('click', '#button1' ,function(e){

var formData = new FormData($("#multiple_upload_form")[0]);
$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                alert("percentComplete"+percentComplete);
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
                if (percentComplete === 1) {
                    $('.progress').addClass('hide');
                }
            }
        }, false);
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: "ajax_upload.php",
    mimeType:"multipart/form-data", 
    data: formData,
    async : false,
    cache : false,
    contentType : false,
    processData:false,
    success: function (data) {  alert("data"+data);  }
});

});
});
</script>

</head>
<body>
<form method="post" enctype="multipart/form-data" id="multiple_upload_form">
<div class="progress"></div>
<input type="file" name="upload_f"/>
<input type="button" id="button1" name="button" value="submit"/>
</form>
</body>
</html>

ajax_upload.php 

 <?php
 $output_dir = "upload/";
      $type="video";

      $fileName = $_FILES["upload_f"]["name"];
      $extn = pathinfo($fileName, PATHINFO_EXTENSION);

      if(move_uploaded_file($_FILES["upload_f"]["tmp_name"],$output_dir.$fileName))
      {
        echo "1";

      }
      else
      {
        echo "0";

      }   

 ?>

Upvotes: 4

Views: 3301

Answers (1)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Your are upload file async way so set it true. Here is your solution code:

JS Code:

$(document).ready(function(){

    $(document.body).on('click', '#button1' ,function(e){

        var formData = new FormData($("#multiple_upload_form")[0]);
        $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                        if (percentComplete === 1) {
                            $('.progress').addClass('hide');
                        }
                    }
                }, true);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                    }
                }, true);
                return xhr;
            },
            type: 'POST',
            url: "ajax_upload.php",
            mimeType:"multipart/form-data", 
            data: formData,
            async : true,
            cache : false,
            contentType : false,
            processData:false,
            success: function (data) {  alert("data"+data);  }
        });

    });
});

Hope this help you!

Upvotes: 2

Related Questions