Ajax Image Upload with Progressbar (jQuery and PHP)

Today we are going to create an image upload and resize script with a progress bar. This is an extension of my previous tutorial about image upload and resize script using jQuery and PHP, I suggest you go though that tutorial, because only thing we are going to add here is a progress-bar.

Progress-bar requires modern browsers that support XMLHttpRequest 2. It’s HTML5 feature that adds more functionality to Ajax request, additionally we can monitor the progress of data transfers. Thankfully all modern browsers support this feature.

Ajax Image Upload and Resize with Progressbar

HTML Form

Below is our HTML form. As you can see this is exactly the same form as shown in previous example, only thing I have added here is progressbar element.

1
2
3
4
5
6
7
8
9
<div class="form-wrap">
<h3>Ajax Image Uploader</h3>
    <form action="process.php" method="post" enctype="multipart/form-data" id="upload_form">
        <input name="__files[]" type="file" multiple />
        <input name="__submit__" type="submit" value="Upload"/>
    </form>
    <div id="progress-wrp"><div class="progress-bar"></div ><div class="status">0%</div></div>
    <div id="output"><!-- error or success results --></div>
</div>

Styling Progress Bar

This CSS will transform our DIV element into a nice looking progress-bar. You are welcome to change its appearance as you prefer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    border-radius: 3px;
    margin: 10px;
    text-align: left;
    background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
    height: 20px;
    border-radius: 3px;
    background-color: #f39ac7;
    width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}

jQuery

To bring our progress-bar in life, I’ve added behavior to XMLHttpRequest function in jQuery Ajax code. XMLHttpRequest provides us with the ability to listen to progress events while the request is being processed. We can capture the arguments passed by XMLHttpRequest function and use them to change width and text of progressbar real-time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.ajax({
    url : post_url,
    type: "POST",
    data : form_data,
    contentType: false,
    cache: false,
    processData:false,
    xhr: function(){
        //upload Progress
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function(event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;
                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
                //update progressbar
                $(progress_bar_id +" .progress-bar").css("width", + percent +"%");
                $(progress_bar_id + " .status").text(percent +"%");
            }, true);
        }
        return xhr;
    },
    mimeType:"multipart/form-data"
}).done(function(res){ //
    $(my_form_id)[0].reset(); //reset form
    $(result_output).html(res); //output response from server
    submit_btn.val("Upload").prop( "disabled", false); //enable submit button once ajax is done
});

Wrap up

Everything else in this script is same as Ajax Image upload, you should find rest of the code in sample file below. Good luck!

Download Demo

86 Comments Add Comment