Skip to content Skip to sidebar Skip to footer
Home / Ajax / Css / Html / Jquery / Php

How To Show Progress Bar In Ajax File Upload

Post a Comment
My code post ajax request but it is not showing a progress bar. Please help to correct the code to show a working progress bar. $(document).ready(function () { $('#uploadbutton

Solution 1:

@whitneyit : we can use xhr: function of ajax to track the file upload something like this

$.ajax({
                url: 'handler/FileUploader.ashx?FileName=' + file.name, //server script to process datatype: 'POST',
                xhr: function () {
                    myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                    }
                    return myXhr;
                },
                success: function (result) {                    
                    //On success if you want to perform some tasks.
                },
                data: file,
                cache: false,
                contentType: false,
                processData: false
            });
            functionprogressHandlingFunction(e) {
                if (e.lengthComputable) {
                    var s = parseInt((e.loaded / e.total) * 100);
                    $("#progress" + currFile).text(s + "%");
                    $("#progbarWidth" + currFile).width(s + "%");
                    if (s == 100) {
                        triggerNextFileUpload();
                    }
                }
            }

Solution 2:

This is from BlueImp's jQuery-File-Upload:

First of all, download: https://github.com/blueimp/jQuery-File-Upload/archives/master

Now, upload the js folder.

Make your .html:

<html><head><metacharset="utf-8"><title>jQuery File Upload Example</title><style>.bar {
         height: 18px;
         background: green;
      }
    </style></head><body><inputid="fileupload"type="file"name="files[]"data-url="server/php/"multiple><divid="progress"><divclass="bar"style="width: 0%;"></div></div><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scriptsrc="js/vendor/jquery.ui.widget.js"></script><scriptsrc="js/jquery.iframe-transport.js"></script><scriptsrc="js/jquery.fileupload.js"></script><script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
    });
    </script></body></html>

I have not tested this, but it SHOULD be functional. Let me know if it is not.

Optional: Include the contents of <style></style> in your .css file.

Optional: Include .js in a .js <script src=""></script> tag.

Source: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Solution 3:

Unfortunately the $.ajax method does not return any progres information.

Also, there is no crossbrowser solution to this using only HTML and JavaScript. I would suggest looking at Uploadify.

Post a Comment for "How To Show Progress Bar In Ajax File Upload"