Ajax Image Upload with Progressbar (jQuery and PHP)
Written by Saran on May 20, 2012, Updated July 27, 2019
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.HTML
- 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.CSS
- 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.JQUERY
- 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
});
