jQuery ajax progress event

Question

I'm using jQuery $.ajax to upload files.

How can I get the progress event and then apply the appropriate settings?

Here is my $.ajax :

$.ajax({
                url : "upload.php",
                type : "POST",
                data : formData,
                processData : false,
                contentType : false,
                success : function(message, response){
                    document.getElementById("status").innerHTML = response;
                }
            })

And what I need is to show a progressBar during upload. How should I achieve this?

NOTE: I don't want the fake effect which is putting a loader, and the on success removing it and showing proper data. What I need is a real progressData to be fetched during upload.

I can't comment because I don't have enough rep, but see here: https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery [Interesting...SO converts my answer to a comment] — caszi, Apr 08 '14 at 19:40
Seems like a duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) as that also shows progress. — jfriend00, Apr 08 '14 at 19:41

codefreaK · Accepted Answer · 2014-04-08T19:49:54.113

Here is an the answer check this out this satifies php file upload enter link description here Let’s start by writing HTML form, element for the progress bar, we just need to style and transform them into a nice looking progress bar.

<div id="upload-wrapper">
<div align="center">
<h3>Ajax Image Uploader with Progressbar</h3>
<span class="">Image Type allowed: Jpeg, Jpg, Png and Gif. | Maximum Size 1 MB</span>
<form action="processupload.php" onSubmit="return false" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="ImageFile" id="imageInput" type="file" />
<input type="submit"  id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox" style="display:none;"><div id="progressbar"></div ><div id="statustxt">0%</div></div>
<div id="output"></div>
</div>
</div>

Css //begining

Here’s what our CSS file looks like, this will transform into a nice looking progress-bar. The outer progress box is set to 400 pixel width, with a 1 pixel border around it. The progresbar stays hidden initially and should be displayed only when upload starts.

#progressbox {
border: 1px solid #0099CC;
padding: 1px; 
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:20px;
border-radius: 3px;
background-color: #003333;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}

Jquery

 $(document).ready(function() {  
        var options = { 
                target:   '#output', 
                beforeSubmit:  beforeSubmit,
                uploadProgress: OnProgress, //upload progress callback 
                success:       afterSuccess,
                resetForm: true  
            }; 

         $('#MyUploadForm').submit(function() { 
                $(this).ajaxSubmit(options);            
                return false; 
            });
    });

The function below captures the arguments passed by form plugin, changing the width and text of progressbar real-time.

function OnProgress(event, position, total, percentComplete)
{
    //Progress bar
    progressbar.width(percentComplete + '%') //update progressbar percent complete
    statustxt.html(percentComplete + '%'); //update status text
    if(percentComplete>50)
        {
            statustxt.css('color','#fff'); //change status text to white after 50%
        }
}

Wrap up Everything else in this script is same as Ajax Image upload, you should find rest of the code in sample file below. The scrip is pretty intermediate level, Good luck!

SO really doesn't want answers that are only a link to an external site as then the SO content doesn't stand on it's own and won't be useful if/when that external site changes or goes away. — jfriend00, Apr 08 '14 at 19:42
Okay i was jolting down that and copying and formating that to be pasted here — codefreaK, Apr 08 '14 at 19:43

jQuery ajax progress event

1 Answers1

Css //begining

Jquery