Ajax Upload with Progress bar

add this style :

<style>
#dragandrophandler {
/*border: 2px dotted #0B85A1;*/
width: 400px;
color: #92AAB0;
text-align: left;
vertical-align: middle;
padding: 10px 10px 10px 10px;
margin-bottom: 10px;
font-size: 200%;
}

.progressBar {
width: 200px;
height: 22px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
display: inline-block;
margin: 0px 10px 5px 5px;
vertical-align: top;
}

.progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0ba1b5;
border-radius: 3px;
}

.statusbar {
border-top: 1px solid #A9CCD1;
min-height: 25px;
width: 700px;
padding: 10px 10px 0px 10px;
vertical-align: top;
}

.statusbar:nth-child(odd) {
background: #EBEFF0;
}

.filename {
display: inline-block;
vertical-align: top;
width: 250px;
}

.filesize {
display: inline-block;
vertical-align: top;
color: #30693D;
width: 100px;
margin-left: 10px;
margin-right: 5px;
}

.abort {
background-color: #A8352F;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: inline-block;
color: #fff;
font-family: arial;
font-size: 13px;
font-weight: normal;
padding: 4px 15px;
cursor: pointer;
vertical-align: top;
}
</style>

this is html form page, form is unecessary since we are going to use ajax to upload the data (including the file), but we put it here just to make it looks sensible 🙂

<form action="someuploadurl" method="post" enctype="multipart/form-data" id="UploadForm">
<input type="text" name="Title" id="Title"/>
<input type="file" name="file" id="file"/>
<input type="button" onclick="uploadFile()" value="submit"/>
</form>
<!-- we are going to put progress bar here"-->
<div id="dragandrophandler">
</div>

add this js functions (dont forget to include jquery before it)

<script>

//change form data on this function to match your form
function uploadFile() {

var obj = $('#dragandrophandler');
var file = $('#file')[0].files[0];
var fd = new FormData();
fd.append('file', file);
fd.append('Title', $('#Title').val()); 

var uploadURL = 'someupload url'; //Upload URL
//check if file is selected
if (file) {
//send form
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(file.name, file.size);
SendFormToServer(fd, status, uploadURL);
//hide the form 🙂
$('#UploadForm').hide();
}
else
alert('file not found!');
}

//ajax success call back
function success(e)
{
// do whatever
}

//ajax abort 
function todo_abort()
{
//do whatever
$('#UploadForm').show();//show the form
}

function SendFormToServer(formData, status, uploadURL) {
//console.log(formData);

//var extraData = JSON.stringify(jsonObject); //Extra Data.
var jqXHR = $.ajax({
xhr: function () {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.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);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType: false,
processData: false,
cache: false,
data: formData,
success: function (e) {
success(e);//add success method
status.setProgress(100);
}
});

status.setAbort(jqXHR);
}

var rowCount = 0;
function createStatusbar(obj) {
rowCount++;
var row = "odd";
if (rowCount % 2 == 0) row = "even";
this.statusbar = $("<div class='statusbar " + row + "'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
obj.after(this.statusbar);

this.setFileNameSize = function (name, size) {
var sizeStr = "";
var sizeKB = size / 1024;
if (parseInt(sizeKB) > 1024) {
var sizeMB = sizeKB / 1024;
sizeStr = sizeMB.toFixed(2) + " MB";
}
else {
sizeStr = sizeKB.toFixed(2) + " KB";
}

this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function (progress) {
var progressBarWidth = progress * this.progressBar.width() / 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if (parseInt(progress) >= 100) {
this.abort.hide();
var obj = this.statusbar;
window.setTimeout(function () { obj.hide(); }, 1000);
}
}
this.setAbort = function (jqxhr) {
var sb = this.statusbar;
this.abort.click(function () {
jqxhr.abort();
todo_abort();
sb.hide();
});
}
}

</script>

done. good luck.

these scripts was originaly came from multiple ajax upload with drag & drop method, i’ve modified the function just to make it able to upload single file via form, all credits belong to the respective owner

Advertisements

One thought on “Ajax Upload with Progress bar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s